Rendering doesn't wait for serverPrefetch with Pinia store #548

DannyZB · 2022-12-09T09:33:14Z

DannyZB
Dec 9, 2022

Description

I am having an issue with rendering on SSR doesn't wait for onServerPrefetch to be done before returning from renderToNodeStream
Ends up with wrong data rendered and in the Pinia store..


async function onBeforeRender(pageContext)
{
    console.log('onBeforeRender started')
    if(typeof document !== 'undefined') { // client side
        return {
            pageContext: {
            }
        }
    }

    console.log('onBeforeRender: App creation started')
    const { app, store } = createApp(pageContext)
    console.log('onBeforeRender: App creation done')
    const stream = renderToNodeStream(app)
    console.log('onBeforeRender: Stream created')

    // const initialStoreState = toRawStoreValue(store.state.value)
    const initialStoreState = store.state.value
    console.log('onBeforeRender: Initial Store State Set')

    return {
        pageContext: {
            initialStoreState,
            stream
        },
    }
}


async function render(pageContext) {
    const { stream } = pageContext
    console.log('Document rendering started')

    const documentHtml = escapeInject`<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title></title>
  </head>
  <body>
    <div id="app">${stream}</div>
  </body>
  </html>`

    return {
        documentHtml,
        pageContext: {
            enableEagerStreaming: true
        }
    }
}

onBeforeRender: Initial Store State Set is logged before serverPrefetch is fired.
On the surface I did exactly like in the Pinia example. Not sure what's broken.

Error Message + Error Stack

No response

Answered by DannyZB

Dec 13, 2022

The latest release resolved the issue.
Thank you!

View full answer

brillout · 2022-12-09T10:12:41Z

brillout
Dec 9, 2022
Maintainer

The thing here is that onServerPrefetch() is called during the stream. This means that when you access the store before passing the stream to VPS, then onServerPrefetch() wasn't called yet.

To fix this you can return a pageContext promise, see https://vite-plugin-ssr.com/stream#initial-data-after-streaming.

0 replies

DannyZB · 2022-12-09T12:34:23Z

DannyZB
Dec 9, 2022
Author

Tried it, didn't help.
Also, I followed the example for vue-pinia https://github.com/brillout/vite-plugin-ssr/blob/main/examples/vue-pinia/renderer/_default.page.server.js

You don't use that there.

I tested with that and the prefetch is done before returning the response to the client, but after the pageContextPromise is called.

1 reply

brillout Dec 10, 2022
Maintainer

You can now return a pageContext promise function, see the updated docs https://vite-plugin-ssr.com/stream#initial-data-after-streaming. Released v0.4.57. That should do the trick.

DannyZB · 2022-12-09T13:47:13Z

DannyZB
Dec 9, 2022
Author

In my code it looks like the serverPrefetch hook just doesn't get waited for.
Removed Pinia and replaced with await sleep(1000) and the same issue is there.

1 reply

brillout Dec 10, 2022
Maintainer

The thing here is that addition pageContext needs to be provided after the stream ends. You can now do that with the latest release, see my comment above.

DannyZB · 2022-12-13T15:56:39Z

DannyZB
Dec 13, 2022
Author

The latest release resolved the issue.
Thank you!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rendering doesn't wait for serverPrefetch with Pinia store #548

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Rendering doesn't wait for serverPrefetch with Pinia store #548

DannyZB Dec 9, 2022

Description

Error Message + Error Stack

Replies: 4 comments · 2 replies

brillout Dec 9, 2022 Maintainer

DannyZB Dec 9, 2022 Author

brillout Dec 10, 2022 Maintainer

DannyZB Dec 9, 2022 Author

brillout Dec 10, 2022 Maintainer

DannyZB Dec 13, 2022 Author

DannyZB
Dec 9, 2022

Replies: 4 comments 2 replies

brillout
Dec 9, 2022
Maintainer

DannyZB
Dec 9, 2022
Author

brillout Dec 10, 2022
Maintainer

DannyZB
Dec 9, 2022
Author

brillout Dec 10, 2022
Maintainer

DannyZB
Dec 13, 2022
Author