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.

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

[Flight Parcel] Implement prepareDestinationForModule #31799

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

devongovett
Copy link
Contributor

Followup to #31725

This implements prepareDestinationForModule in the Parcel Flight client. On the Parcel side, the <Resources> component now only inserts <link> elements for stylesheets (along with a bootstrap script when needed), and React is responsible for inserting scripts. This ensures that components that are conditionally dynamic imported during render are also preloaded.

CSS must be added to the RSC tree using <Resources> to avoid FOUC. This must be manually rendered in both the top-level page, and in any component that is dynamic imported. It would be nice if there was a way for React to automatically insert CSS as well, but unfortunately prepareDestinationForModule only knows about client components and not CSS for server components. Perhaps there could be a way we could annotate components at code splitting boundaries with the resources they need? More thoughts in this thread: #31725 (comment)

Copy link

vercel bot commented Dec 16, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 16, 2024 4:49am

function Content() {
data ??= createFromReadableStream<ReactElement>(s1);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW this took me a long time to debug why preinits weren't working. This must be initialized during render so the current request is set in AsyncLocalStorage. Might be nice if there was some kind of error/warning instead of silently not inserting any scripts.

@react-sizebot
Copy link

Comparing: e06c72f...82864ad

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB +0.11% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 510.76 kB 510.76 kB = 91.36 kB 91.36 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 515.55 kB 515.55 kB = 92.17 kB 92.17 kB
facebook-www/ReactDOM-prod.classic.js = 594.69 kB 594.69 kB = 104.93 kB 104.93 kB
facebook-www/ReactDOM-prod.modern.js = 584.96 kB 584.96 kB = 103.37 kB 103.37 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +1.08% 52.75 kB 53.32 kB +1.61% 10.78 kB 10.96 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +1.08% 52.75 kB 53.32 kB +1.61% 10.78 kB 10.96 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +1.07% 53.26 kB 53.83 kB +1.61% 10.86 kB 11.03 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +1.05% 54.28 kB 54.85 kB +1.59% 11.09 kB 11.27 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +1.05% 54.28 kB 54.85 kB +1.59% 11.09 kB 11.27 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +1.04% 54.79 kB 55.36 kB +1.58% 11.17 kB 11.35 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +0.64% 90.04 kB 90.61 kB +1.02% 17.02 kB 17.19 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +0.64% 90.04 kB 90.61 kB +1.02% 17.02 kB 17.19 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +0.63% 91.84 kB 92.41 kB +0.98% 17.37 kB 17.54 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +0.63% 91.84 kB 92.41 kB +0.98% 17.37 kB 17.54 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +0.57% 101.76 kB 102.34 kB +0.88% 19.36 kB 19.53 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +0.56% 103.57 kB 104.14 kB +0.86% 19.69 kB 19.86 kB

Generated by 🚫 dangerJS against 158e5cb

@devongovett devongovett changed the title Implement prepareDestinationForModule in Parcel Flight client [Flight Parcel] Implement prepareDestinationForModule in client Dec 17, 2024
@devongovett devongovett changed the title [Flight Parcel] Implement prepareDestinationForModule in client [Flight Parcel] Implement prepareDestinationForModule Dec 17, 2024
@devongovett
Copy link
Contributor Author

@sebmarkbage if you have a chance, lmk if this approach looks ok and if you have any thoughts on how we could make CSS a bit more automatic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants