fix(ssr): resolve nested async teleport content by edison1105 · Pull Request #9431 · vuejs/core

edison1105 · 2023-10-19T12:08:03Z

the root cause is that targetBuffer may be a two-dimensional array.

core/packages/server-renderer/src/helpers/ssrRenderTeleport.ts

Lines 28 to 36 in 0a8be45

    
           } else { 
        
             const { getBuffer, push } = createBuffer() 
        
             contentRenderFn(push) 
        
             push(`<!--teleport anchor-->`) 
        
             teleportContent = getBuffer() 
        
           } 
        
           targetBuffer.splice(bufferIndex, 0, teleportContent) 
        
           parentPush('<!--teleport end-->')

Summary by CodeRabbit

Bug Fixes
- Improved server-side rendering for teleports that include nested Suspense and async components, ensuring correct teleport marker-only output where appropriate and correct resolved HTML placement.
- Improved teleport buffer handling to better detect and process async teleport content during SSR.
Tests
- Added coverage to verify nested async content inside Teleport + Suspense resolves correctly in renderToString.

github-actions · 2023-10-19T12:09:29Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	106 kB	40.2 kB	36.1 kB
vue.global.prod.js	164 kB	60.2 kB	53.5 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	19 kB	17.4 kB
createApp	56.9 kB	22 kB	20.1 kB
createSSRApp	61.2 kB	23.8 kB	21.7 kB
defineCustomElement	63.1 kB	23.9 kB	21.8 kB
overall	71.7 kB	27.4 kB	25 kB

danielroe · 2026-06-24T23:22:01Z

this would also resolve nuxt/nuxt#35427

@edison1105 I came up with a couple of extra tests if that would be helpful in getting this merged 🙏

edison1105 · 2026-06-24T23:26:28Z

@danielroe will be merged soon.

…05/9431

coderabbitai · 2026-06-24T23:31:51Z

📝 Walkthrough

Walkthrough

SSR teleport handling now marks async teleport buffers and resolves them directly. A new SSR test covers Teleport with Suspense around an async component and checks the rendered teleport output.

Changes

SSR teleport with Suspense

Layer / File(s)	Summary
Async teleport buffer handling `packages/server-renderer/src/helpers/ssrRenderTeleport.ts`, `packages/server-renderer/src/renderToString.ts`	`ssrRenderTeleport` marks async teleport buffers, and `resolveTeleports` unrolls stored buffers directly.
SSR teleport suspense regression test `packages/server-renderer/__tests__/ssrTeleport.spec.ts`	The SSR teleport spec imports `defineAsyncComponent` and adds a test for Teleport with Suspense and an async child component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

scope: teleport

Poem

A bunny hopped through SSR mist,
with Teleport and Suspense on the list.
Async content landed just so,
in the target where the carrots grow.
Hop! the markers stayed in sight,
and the teleported span came out right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The changes implement the reported SSR Teleport + Suspense bug by preserving async teleported content and adding coverage.
Out of Scope Changes check	✅ Passed	The PR stays focused on SSR teleport/Suspense handling and adds only a targeted test plus renderer changes.
Title check	✅ Passed	The title accurately reflects the main fix: SSR now resolves async content nested inside Teleport, matching the change set.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-06-24T23:32:48Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@9431

npm i https://pkg.pr.new/@vue/compiler-core@9431

yarn add https://pkg.pr.new/@vue/compiler-core@9431.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@9431

npm i https://pkg.pr.new/@vue/compiler-dom@9431

yarn add https://pkg.pr.new/@vue/compiler-dom@9431.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@9431

npm i https://pkg.pr.new/@vue/compiler-sfc@9431

yarn add https://pkg.pr.new/@vue/compiler-sfc@9431.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@9431

npm i https://pkg.pr.new/@vue/compiler-ssr@9431

yarn add https://pkg.pr.new/@vue/compiler-ssr@9431.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@9431

npm i https://pkg.pr.new/@vue/reactivity@9431

yarn add https://pkg.pr.new/@vue/reactivity@9431.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@9431

npm i https://pkg.pr.new/@vue/runtime-core@9431

yarn add https://pkg.pr.new/@vue/runtime-core@9431.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@9431

npm i https://pkg.pr.new/@vue/runtime-dom@9431

yarn add https://pkg.pr.new/@vue/runtime-dom@9431.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@9431

npm i https://pkg.pr.new/@vue/server-renderer@9431

yarn add https://pkg.pr.new/@vue/server-renderer@9431.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@9431

npm i https://pkg.pr.new/@vue/shared@9431

yarn add https://pkg.pr.new/@vue/shared@9431.tgz

vue

pnpm add https://pkg.pr.new/vue@9431

npm i https://pkg.pr.new/vue@9431

yarn add https://pkg.pr.new/vue@9431.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@9431

npm i https://pkg.pr.new/@vue/compat@9431

yarn add https://pkg.pr.new/@vue/compat@9431.tgz

commit: 68d1ee9

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/server-renderer/__tests__/ssrTeleport.spec.ts`:
- Around line 220-222: The teleport target assertion in ssrTeleport.spec.ts is
missing the leading `<!--teleport start anchor-->` marker. Update the expected
value in the `ssrRenderTeleport` test to match the enabled teleport wrapping
produced by `ssrRenderTeleport`, using the existing `ctx.teleports['`#target`']`
assertion as the location to fix.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0f30626d-5800-4951-aba6-fe6a84a3205f

📥 Commits

Reviewing files that changed from the base of the PR and between 325eb1d and 418985a.

📒 Files selected for processing (2)

packages/server-renderer/__tests__/ssrTeleport.spec.ts
packages/server-renderer/src/renderToString.ts

edison1105 · 2026-06-24T23:46:38Z

/ecosystem-ci run

vue-bot · 2026-06-25T00:06:56Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
nuxt	✅ success	✅ success
primevue	✅ success	✅ success
language-tools	✅ success	✅ success
vitepress	✅ success	❌ failure
vant	✅ success	✅ success
vue-macros	✅ success	✅ success
vue-simple-compiler	✅ success	❌ failure
vueuse	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vuetify	✅ success	❌ failure
radix-vue	❌ failure	❌ failure
quasar	✅ success	✅ success
vite-plugin-vue	✅ success	❌ failure
vue-i18n	✅ success	✅ success
pinia	✅ success	✅ success

fix(ssr): properly resolve suspense in teleport

b0eb7f5

edison1105 added 3 commits October 19, 2023 20:13

chore: improve code

6b427ed

chore: improve code

59501d2

Merge branch 'main' into fix/6207

c7e8cd8

edison1105 mentioned this pull request Nov 4, 2023

fix(teleport): unrollBuffer unrolls asynchronous item synchronously during teleport #9543

Closed

Kasparas-G55 mentioned this pull request Nov 4, 2023

SSR Body Teleport causes hydration children mismatch nuxt/icon#37

Open

edison1105 and others added 2 commits January 9, 2024 17:38

Merge branch 'main' into fix/6207

79c5e7c

[autofix.ci] apply automated fixes

202c547

edison1105 added scope: ssr scope: suspense labels Mar 7, 2024

edison1105 added the ready for review This PR requires more reviews label Aug 1, 2024

danielroe mentioned this pull request Jun 24, 2026

[Nuxt Island] Components with onServerPrefetch don't render during SSR within nuxt-client nuxt/nuxt#35427

Closed

edison1105 added ready to merge The PR is ready to be merged. and removed ready for review This PR requires more reviews labels Jun 24, 2026

edison1105 removed this from Issue / PR Management Jun 24, 2026

Merge branch 'main' of https://github.com/vuejs/core into pr/edison11…

418985a

…05/9431

coderabbitai Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread packages/server-renderer/__tests__/ssrTeleport.spec.ts

fix(ssr): resolve nested async teleport content

68d1ee9

edison1105 changed the title ~~fix(ssr): properly resolve suspense in teleport~~ fix(ssr): resolve nested async teleport content Jun 25, 2026

edison1105 merged commit 31d0f23 into vuejs:main Jun 25, 2026
14 checks passed

	} else {
	const { getBuffer, push } = createBuffer()
	contentRenderFn(push)
	push(`<!--teleport anchor-->`)
	teleportContent = getBuffer()
	}

	targetBuffer.splice(bufferIndex, 0, teleportContent)
	parentPush('<!--teleport end-->')

Uh oh!

Uh oh!

Conversation

edison1105 commented Oct 19, 2023 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Oct 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

danielroe commented Jun 24, 2026

Uh oh!

edison1105 commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edison1105 commented Jun 24, 2026

Uh oh!

vue-bot commented Jun 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

edison1105 commented Oct 19, 2023 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Oct 19, 2023 •

edited

Loading

edison1105 commented Jun 24, 2026 •

edited

Loading

coderabbitai Bot commented Jun 24, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 24, 2026 •

edited

Loading