Skip to content

Render pending async props when server rendering - #826

Open
pleek91 wants to merge 1 commit into
mainfrom
ssr-async-props
Open

Render pending async props when server rendering#826
pleek91 wants to merge 1 commit into
mainfrom
ssr-async-props

Conversation

@pleek91

@pleek91 pleek91 commented Aug 29, 2026

Copy link
Copy Markdown
Member

Description

A view with an async props getter rendered nothing when server rendered. The wrapper its pending props go through was chosen by reading the component instance's suspense property, which is client only and always false during SSR, so the server always got the wrapper that fills a ref from a promise handler — and the server renderer never awaits that.

It now picks the awaiting wrapper when vue's ssr context is present. The server renderer awaits async setup whether or not a <Suspense> boundary exists, so this needs nothing from the app. Client behaviour is unchanged.

// renderToString: "" before, "<div>hello craig</div>" after
createRoute({ name: 'user', path: '/' })
  .addView(UserPage, { props: async () => ({ user: await getUser() }) })

import.meta.env.SSR is not usable for this — it would be replaced when this package is built rather than when an app using it is.

@netlify

netlify Bot commented Aug 29, 2026

Copy link
Copy Markdown

Deploy Preview for kitbag-router ready!

Name Link
🔨 Latest commit 0bb89b3
🔍 Latest deploy log https://app.netlify.com/projects/kitbag-router/deploys/6a9359e834f1b00008f83403
😎 Deploy Preview https://deploy-preview-826--kitbag-router.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

The wrapper a view's pending props go through was chosen by reading the instance's
suspense property, which is client only and always false while server rendering. The
server therefore always got the wrapper that fills a ref from a promise handler, which
the server renderer never awaits, so a view with an async props getter rendered nothing.

Choose the awaiting wrapper when vue's ssr context is present instead. The server
renderer awaits async setup whether or not a Suspense boundary exists, so this needs
nothing from the app.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant