7a5ef27b5e
This PR implements preloading of CSS from RSC. 1. The underlying Flight protocol was extended in https://github.com/facebook/react/pull/26502 to allow sending hints from RSC to SSR and Client runtimes. React was updated to include these changes. 2. We now call `ReactDOM.preload()` for each stylesheet used in a layout/page layer There are a few implementation details to take note of 1. we were previously using the `.browser` variant of a few React packages. This was a holdover from when there was just browser and node and we wanted to use the browser variant b/c we wanted the same code to work in edge/node runtimes. React now publishes a `.edge` variant which is like `.browser` but expects to be server only. This is necessary to get the opt-in for `AsyncLocalStorage`. 2. Even with the above change, AsyncLocalStorage was not patched on the global scope until after React was loaded. I moved this into a module which is loaded first 3. The component passed to RSC's `renderToReadableStream` is not actually part of the RSC module graph. If I tried to call `ReactDOM.preload()` inside that function or any other function defined inside `app-render.tsx` file it would actually see the wrong instance of `react-dom`. I added a new export on the RSC top level export which exposes a `preloadStyle(...)` function which just delegates to `ReactDOM.preload(...)`. This makes the preload run in the right module graph ~There are a couple of bugs in React that this work uncovered that I will upstream. We may want to delay merging until they are addressed. I'll update this comment when that is complete.~ 1. ~React, during SSR, can emit a preload for a style twice in some circumstances because late discovered stylesheets don't consider whether a preload has already been flushed when preparing to reveal a boundary they are within~ 2. ~React, during RSC updates on the client, can preload a style that is already in the document because it currently only looks for existing preload links and does not consider if there is a stylesheet link with the same href.~ ~both of these issues will not break functionality, they just make the network tab look at bit more noisy. We would expect network deduping to prevent multiple actual loads~ The above React bugs were fixed and included now in the React update in this PR --------- Co-authored-by: Shu Ding <g@shud.in> |
||
|---|---|---|
| .. | ||
| compat | ||
| font | ||
| image-types | ||
| legacy | ||
| navigation-types/compat | ||
| src | ||
| types | ||
| amp.d.ts | ||
| amp.js | ||
| app.d.ts | ||
| app.js | ||
| babel.d.ts | ||
| babel.js | ||
| client.d.ts | ||
| client.js | ||
| config.d.ts | ||
| config.js | ||
| constants.d.ts | ||
| constants.js | ||
| document.d.ts | ||
| document.js | ||
| dynamic.d.ts | ||
| dynamic.js | ||
| error.d.ts | ||
| error.js | ||
| head.d.ts | ||
| head.js | ||
| headers.d.ts | ||
| headers.js | ||
| image.d.ts | ||
| image.js | ||
| index.d.ts | ||
| jest.d.ts | ||
| jest.js | ||
| license.md | ||
| link.d.ts | ||
| link.js | ||
| navigation.d.ts | ||
| navigation.js | ||
| package.json | ||
| README.md | ||
| router.d.ts | ||
| router.js | ||
| script.d.ts | ||
| script.js | ||
| server.d.ts | ||
| server.js | ||
| taskfile-ncc.js | ||
| taskfile-swc.js | ||
| taskfile-watch.js | ||
| taskfile.js | ||
| tsconfig.json | ||
| web-vitals.d.ts | ||
| web-vitals.js | ||
Next.js
Getting Started
Visit https://nextjs.org/learn to get started with Next.js.
Documentation
Visit https://nextjs.org/docs to view the full documentation.
Who is using Next.js?
Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.
Community
The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
To chat with other community members you can join the Next.js Discord.
Our Code of Conduct applies to all Next.js community channels.
Contributing
Please see our contributing.md.
Good First Issues
We have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Authors
- Tim Neutkens (@timneutkens)
- Naoyuki Kanezawa (@nkzawa)
- Guillermo Rauch (@rauchg)
- Arunoda Susiripala (@arunoda)
- Tony Kovanen (@tonykovanen)
- Dan Zajdband (@impronunciable)
Security
If you believe you have found a security vulnerability in Next.js, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com to disclose any security vulnerabilities.