ant-design/cssinjs

renderToPipeableStream compatible solution

ntucker opened this issue · 1 comments

ntucker commented

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 commented

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