Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

renderToPipeableStream compatible solution #79

Open
ntucker opened this issue Jan 18, 2023 · 1 comment
Open

renderToPipeableStream compatible solution #79

ntucker opened this issue Jan 18, 2023 · 1 comment

Comments

@ntucker
Copy link

ntucker commented Jan 18, 2023 •
edited
Loading

https://ant.design/docs/react/customize-theme#server-side-render-ssr currently suggests using renderToString - and for good reason. It requires the entire page to be rendered to correctly extract the CSS.

renderToPipeableStream means there are pieces of the page incrementally streaming. Therefore, the styles needed must suspend to stream as well - otherwise you're stuck waiting for the entire page to load to stream the extractStyle (which causes a flash of unstyled content), or if you put it too early you miss some of the css entirely.

Instead of extractStyles, you could have a component called Styles that you render in your renderToPipeableStream

function Document({children}) {
  return (
    <html>
      <head>
        <meta charSet={charSet} />
        <Styles />
        <title>{title}</title>
      </head>
      <body>
        <div id={rootId}>{children}</div>
      </body>
    </html>
  );
}

The key to making a suspending component work correctly is the https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore api as this will still cause "re-renders" during SSR streaming.
@BloodNoteII
Copy link

@ntucker
How to get the Styles component，ant-design/cssinjs maybe not supported it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ntucker @BloodNoteII