Trying to use renderToPipeableStream with ssg (react) #1714
Replies: 2 comments 4 replies
-
|
Yes, you can use a stream while pre-rendering. The stream is awaited and the accumulated chunks result in the HTML string generated at |
Beta Was this translation helpful? Give feedback.
-
|
@brillout Hmm I think I am a little confused could you maybe point me here in the correct direction? This is what I do right now: async function onRenderHtml(pageContext: PageContextServer & TAuthPageContext) {
const { Page, pageProps } = pageContext;
let pageHtml = '';
if (Page) {
// for SSR
await initLocal('de');
pageHtml = ReactDOMServer.renderToString(
<PageShell pageContext={pageContext}>
{/* @ts-ignore */}
<Page {...pageProps} />
</PageShell>
);
}
// See https://vike.dev/head
const { documentProps } = pageContext.exports;
const title = import.meta.env.VITE_APP_TITLE || 'Kundenportal';
const documentHtml = escapeInject`<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link id="theme-link" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="${desc}" />
<title>${title}</title>
</head>
<body>
<div id="react-root">${dangerouslySkipEscape(pageHtml)}</div>
<div id="portal-root"></div>
</body>
</html>`;
return {
documentHtml,
pageContext: {
app: true
}
};
}I thought I simply need to do: async function onRenderHtml(pageContext: PageContextServer & TAuthPageContext) {
const { Page, pageProps } = pageContext;
// let pageHtml = '';
if (Page) {
// for SSR
await initLocal('de');
const pageHtml = ReactDOMServer.renderToPipeableStream(
<PageShell pageContext={pageContext}>
{/* @ts-ignore */}
<Page {...pageProps} />
</PageShell>
);
return {
documentHtml: pageHtml.pipe,
pageContext: {
app: true
}
};
}
}But I get So I guess I am doing something wrong, do I need to use a different hook? |
Beta Was this translation helpful? Give feedback.
-
|
Have a look at the various streaming examples. |
Beta Was this translation helpful? Give feedback.
-
|
I just had a look at https://vike.dev/streaming and I think the docs and examples are good enough, but feel free to disagree. |
Beta Was this translation helpful? Give feedback.
-
|
Honestly, first time for me using a stream like this. I wasn't even sure what to look at. I was just searching for an example using |
Beta Was this translation helpful? Give feedback.
-
|
I think I got it to work thank you. |
Beta Was this translation helpful? Give feedback.
-
Hey,
so we are getting the following error:
I read somewhere that switching to a different render method might help =>
renderToPipeableStreamHowever, I am not even sure if this is possible when rendering to ssg and then statically serving the files from an S3 with cloudfront (without a server).
So basically after we are building our app we simply deploy only the client part of the build output to S3.
Our renderToHtml file looks pretty much like the example:
https://github.com/vikejs/vike/blob/main/examples/render-modes/renderer/%2BonRenderHtml.jsx
Is there another example how it would look if we would want to use
renderToPipeableStreaminstead ofrenderToString?Beta Was this translation helpful? Give feedback.
All reactions