[Flight Fixture] Show SSR Support with CSS #26263
Conversation
facebook-github-bot
added
CLA Signed
React Core Team
|
Comparing: 40755c0...3684595 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
sebmarkbage
force-pushed
the
flightssrfixture
branch
from
21fd7db to
2eea307
Compare
sebmarkbage
force-pushed
the
flightssrfixture
branch
from
2eea307 to
df21bb3
Compare
| precedence: 'default', | ||
| }) | ||
| ), | ||
| React.createElement(App), |
There was a problem hiding this comment.
Why couldn't the mainCSSChunks be passed as prop to App which would then render the link elements in the head, similar to what is documented at https://beta.reactjs.org/reference/react-dom/server/renderToPipeableStream#reading-css-and-js-asset-paths-from-the-build-output?
There was a problem hiding this comment.
It could but this shows that you don't have to - using a new feature that places it in the right place. So the App code can't mess it up by forgetting.
There was a problem hiding this comment.
Now I realise that this was a stupid question. I wasn't aware that this avoids the need to serialise them manually with bootstrapScriptContent, and instead "Float" is handling these elements automatically. Sorry for the noise my PR comments might create.
fixtures/flight/loader/global.js
Outdated
|
|
||
| export const transformSource = | ||
| process.version < 'v16' ? babelTransformSource : undefined; | ||
| export const getSource = process.version < 'v16' ? getSourceImpl : undefined; |
There was a problem hiding this comment.
getting a ReferenceError: getSourceImpl is not defined error on node 14. Is this an oversight?
There was a problem hiding this comment.
Fixed. It still doesn't work on 14 though because undici isn't supported.
gnoff
left a comment
gnoff
left a comment
There was a problem hiding this comment.
Aside from the error on old node, I think this looks good
This ensures we can load JSX in there for SSR.
sebmarkbage
force-pushed
the
flightssrfixture
branch
from
df21bb3 to
3684595
Compare
6 participants
Builds on #26257.
To do this we need access to a manifest for which scripts and CSS are used for each "page" (entrypoint).
The initial script to bootstrap the app is inserted with
bootstrapScripts. Subsequent content are loaded using the chunks mechanism built-in.The stylesheets for each pages are prepended to each RSC payload and rendered using Float. This doesn't yet support styles imported in components that are also SSR:ed nor imported through Server Components. That's more complex and not implemented in the node loader.
HMR doesn't work after reloads right now because the SSR renderer isn't hot reloaded because there's no idiomatic way to hot reload ESM modules in Node.js yet. Without killing the HMR server. This leads to hydration mismatches when reloading the page after a hot reload.
Notably this doesn't show serializing the stream through the HTML like real implementations do. This will lead to possible hydration mismatches based on the data. However, manually serializing the stream as a string isn't exactly correct due to binary data. It's not the idiomatic way this is supposed to work. This will all be built-in which will make this automatic in the future.