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

[Fizz] Add react-dom/static Entry Point for Prerendering #24752

Merged
merged 1 commit into from
Jun 19, 2022

Conversation

sebmarkbage
Copy link
Collaborator

This will be used to add optimizations for static server prerendering.

import {prerender} from "react-dom/static";

For Node I went with:

import {prerenderToNodeStreams} from "react-dom/static";

This always waits for the whole tree to complete before returning a result object.

For the Node.js API I opted to make it more like the Browser API than renderToPipeableStream. So it returns a Promise and accepts an AbortSignal. This is more in line with more modern Node APIs anyway. It also uses full stream.Readable instead of the made up "PipeableStream". Since we're not live streaming we don't need the flush() call so it can just be a regular Readable.

Currently this is only enabled in the experimental build. I confirmed that the entry points and npm files don't get exposed in the stable build.

Notably this "static" is not the same static as "renderToStaticMarkup" where "static" means server-only. That use case will likely be consumed by something like RSC-only without client components.

@sizebot
Copy link

sizebot commented Jun 18, 2022

Comparing: 0f0aca3...059de2c

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.min.js = 131.64 kB 131.64 kB = 42.30 kB 42.30 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 136.92 kB 136.92 kB = 43.89 kB 43.89 kB
facebook-www/ReactDOM-prod.classic.js = 440.83 kB 440.83 kB = 80.64 kB 80.64 kB
facebook-www/ReactDOM-prod.modern.js = 426.13 kB 426.13 kB = 78.45 kB 78.45 kB
facebook-www/ReactDOMForked-prod.classic.js = 441.61 kB 441.61 kB = 80.87 kB 80.87 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js +∞% 0.00 kB 243.84 kB +∞% 0.00 kB 59.19 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +∞% 0.00 kB 35.95 kB +∞% 0.00 kB 12.39 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js +∞% 0.00 kB 245.69 kB +∞% 0.00 kB 59.41 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +∞% 0.00 kB 39.51 kB +∞% 0.00 kB 13.47 kB
oss-experimental/react-dom/static.browser.js +∞% 0.00 kB 0.23 kB +∞% 0.00 kB 0.16 kB
oss-experimental/react-dom/static.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-experimental/react-dom/static.node.js +∞% 0.00 kB 0.22 kB +∞% 0.00 kB 0.16 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js +∞% 0.00 kB 243.84 kB +∞% 0.00 kB 59.19 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +∞% 0.00 kB 35.95 kB +∞% 0.00 kB 12.39 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js +∞% 0.00 kB 245.69 kB +∞% 0.00 kB 59.41 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +∞% 0.00 kB 39.51 kB +∞% 0.00 kB 13.47 kB
oss-experimental/react-dom/static.browser.js +∞% 0.00 kB 0.23 kB +∞% 0.00 kB 0.16 kB
oss-experimental/react-dom/static.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-experimental/react-dom/static.node.js +∞% 0.00 kB 0.22 kB +∞% 0.00 kB 0.16 kB

Generated by 🚫 dangerJS against 059de2c

@sebmarkbage sebmarkbage force-pushed the reactstatic branch 4 times, most recently from 0eceaaa to b3fe59c Compare June 18, 2022 04:33
This will be used to add optimizations for static server rendering.
@sebmarkbage
Copy link
Collaborator Author

sebmarkbage commented Jun 18, 2022

Going forward, I think this API is the only one that should be guaranteed to be deterministic. The other dynamic one is not. However since the implementation will overlap a lot it probably doesn't make much of a difference.

@@ -0,0 +1,7 @@
'use strict';
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do these not use the DCE check code because they are not client and won’t always be bundled?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It matters less on the server so not worth the code. If you're setting up a server environment you are down a deeper rabbit hole anyway.

@sebmarkbage sebmarkbage merged commit 0f216ae into facebook:main Jun 19, 2022
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Sep 6, 2022
Summary:
This sync includes the following changes:
- **[c1f5884ff](facebook/react@c1f5884ff )**: Add missing null checks to OffscreenInstance code ([#24846](facebook/react#24846)) //<Andrew Clark>//
- **[4cd788aef](facebook/react@4cd788aef )**: Revert "Revert [Transition Tracing] Refactor Transition Tracing Root Code" ([#24830](facebook/react#24830)) //<Luna Ruan>//
- **[e61fd91f5](facebook/react@e61fd91f5 )**: Revert "[Transition Tracing] Refactor Transition Tracing Root Code ([#24766](facebook/react#24766))" ([#24829](facebook/react#24829)) //<Andrew Clark>//
- **[401296310](facebook/react@401296310 )**: [Transition Tracing] Refactor Transition Tracing Root Code ([#24766](facebook/react#24766)) //<Luna Ruan>//
- **[185932902](facebook/react@185932902 )**: Track nearest Suspense handler on stack ([#24585](facebook/react#24585)) //<Andrew Clark>//
- **[a7b192e0f](facebook/react@a7b192e0f )**: Add test gate alias for Offscreen ([#24749](facebook/react#24749)) //<Andrew Clark>//
- **[6b6cf8311](facebook/react@6b6cf8311 )**: Land forked reconciler changes ([#24817](facebook/react#24817)) //<Andrew Clark>//
- **[d1432ba93](facebook/react@d1432ba93 )**: [Transition Tracing] Fix excess calls to the transition start callback ([#24806](facebook/react#24806)) //<Luna Ruan>//
- **[88574c1b8](facebook/react@88574c1b8 )**: Fix enableTransitionTracing flag ([#24801](facebook/react#24801)) //<Luna Ruan>//
- **[a4bed4696](facebook/react@a4bed4696 )**: [Transition Tracing] Add Tracing Markers ([#24686](facebook/react#24686)) //<Luna Ruan>//
- **[167853026](facebook/react@167853026 )**: fix hydration warning suppression in text comparisons ([#24784](facebook/react#24784)) //<Josh Story>//
- **[9abe745aa](facebook/react@9abe745aa )**: [DevTools][Timeline Profiler] Component Stacks Backend ([#24776](facebook/react#24776)) //<Luna Ruan>//
- **[cf665c4b7](facebook/react@cf665c4b7 )**: [DevTools] Refactor incompleteTransitions field from Root Fiber memoized state to FiberRoot ([#24765](facebook/react#24765)) //<Luna Ruan>//
- **[56389e81f](facebook/react@56389e81f )**: Abort Flight ([#24754](facebook/react#24754)) //<Sebastian Markbåge>//
- **[0f216ae31](facebook/react@0f216ae31 )**: Add entry points for "static" server rendering passes ([#24752](facebook/react#24752)) //<Sebastian Markbåge>//
- **[f796fa13a](facebook/react@f796fa13a )**: Rename Segment to Task in Flight ([#24753](facebook/react#24753)) //<Sebastian Markbåge>//
- **[0f0aca3ab](facebook/react@0f0aca3ab )**: Aborting early should not infinitely suspend ([#24751](facebook/react#24751)) //<Sebastian Markbåge>//
- **[12a738f1a](facebook/react@12a738f1a )**: [Transition Tracing] Add Support for Multiple Transitions on Root ([#24732](facebook/react#24732)) //<Luna Ruan>//
- **[72ebc703a](facebook/react@72ebc703a )**: [DevTools] fix useDeferredValue to match reconciler change ([#24742](facebook/react#24742)) //<Mengdi Chen>//
- **[7cf9f5e03](facebook/react@7cf9f5e03 )**: Extra space ([#24612](facebook/react#24612)) //<Kerim Büyükakyüz>//

Changelog:
[General][Changed] - React Native sync for revisions 229c86a...c1f5884

Reviewed By: mdvacca, GijsWeterings

Differential Revision: D38904311

fbshipit-source-id: 1e30bc420c30ec7a0c0073fc92a706afef4b3340
cipolleschi pushed a commit to facebook/react-native that referenced this pull request Sep 7, 2022
Summary:
This sync includes the following changes:
- **[c1f5884ff](facebook/react@c1f5884ff )**: Add missing null checks to OffscreenInstance code ([#24846](facebook/react#24846)) //<Andrew Clark>//
- **[4cd788aef](facebook/react@4cd788aef )**: Revert "Revert [Transition Tracing] Refactor Transition Tracing Root Code" ([#24830](facebook/react#24830)) //<Luna Ruan>//
- **[e61fd91f5](facebook/react@e61fd91f5 )**: Revert "[Transition Tracing] Refactor Transition Tracing Root Code ([#24766](facebook/react#24766))" ([#24829](facebook/react#24829)) //<Andrew Clark>//
- **[401296310](facebook/react@401296310 )**: [Transition Tracing] Refactor Transition Tracing Root Code ([#24766](facebook/react#24766)) //<Luna Ruan>//
- **[185932902](facebook/react@185932902 )**: Track nearest Suspense handler on stack ([#24585](facebook/react#24585)) //<Andrew Clark>//
- **[a7b192e0f](facebook/react@a7b192e0f )**: Add test gate alias for Offscreen ([#24749](facebook/react#24749)) //<Andrew Clark>//
- **[6b6cf8311](facebook/react@6b6cf8311 )**: Land forked reconciler changes ([#24817](facebook/react#24817)) //<Andrew Clark>//
- **[d1432ba93](facebook/react@d1432ba93 )**: [Transition Tracing] Fix excess calls to the transition start callback ([#24806](facebook/react#24806)) //<Luna Ruan>//
- **[88574c1b8](facebook/react@88574c1b8 )**: Fix enableTransitionTracing flag ([#24801](facebook/react#24801)) //<Luna Ruan>//
- **[a4bed4696](facebook/react@a4bed4696 )**: [Transition Tracing] Add Tracing Markers ([#24686](facebook/react#24686)) //<Luna Ruan>//
- **[167853026](facebook/react@167853026 )**: fix hydration warning suppression in text comparisons ([#24784](facebook/react#24784)) //<Josh Story>//
- **[9abe745aa](facebook/react@9abe745aa )**: [DevTools][Timeline Profiler] Component Stacks Backend ([#24776](facebook/react#24776)) //<Luna Ruan>//
- **[cf665c4b7](facebook/react@cf665c4b7 )**: [DevTools] Refactor incompleteTransitions field from Root Fiber memoized state to FiberRoot ([#24765](facebook/react#24765)) //<Luna Ruan>//
- **[56389e81f](facebook/react@56389e81f )**: Abort Flight ([#24754](facebook/react#24754)) //<Sebastian Markbåge>//
- **[0f216ae31](facebook/react@0f216ae31 )**: Add entry points for "static" server rendering passes ([#24752](facebook/react#24752)) //<Sebastian Markbåge>//
- **[f796fa13a](facebook/react@f796fa13a )**: Rename Segment to Task in Flight ([#24753](facebook/react#24753)) //<Sebastian Markbåge>//
- **[0f0aca3ab](facebook/react@0f0aca3ab )**: Aborting early should not infinitely suspend ([#24751](facebook/react#24751)) //<Sebastian Markbåge>//
- **[12a738f1a](facebook/react@12a738f1a )**: [Transition Tracing] Add Support for Multiple Transitions on Root ([#24732](facebook/react#24732)) //<Luna Ruan>//
- **[72ebc703a](facebook/react@72ebc703a )**: [DevTools] fix useDeferredValue to match reconciler change ([#24742](facebook/react#24742)) //<Mengdi Chen>//
- **[7cf9f5e03](facebook/react@7cf9f5e03 )**: Extra space ([#24612](facebook/react#24612)) //<Kerim Büyükakyüz>//

Changelog:
[General][Changed] - React Native sync for revisions 229c86a...c1f5884

Reviewed By: mdvacca, GijsWeterings

Differential Revision: D38904311

fbshipit-source-id: 1e30bc420c30ec7a0c0073fc92a706afef4b3340
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This sync includes the following changes:
- **[c1f5884ff](facebook/react@c1f5884ff )**: Add missing null checks to OffscreenInstance code ([facebook#24846](facebook/react#24846)) //<Andrew Clark>//
- **[4cd788aef](facebook/react@4cd788aef )**: Revert "Revert [Transition Tracing] Refactor Transition Tracing Root Code" ([facebook#24830](facebook/react#24830)) //<Luna Ruan>//
- **[e61fd91f5](facebook/react@e61fd91f5 )**: Revert "[Transition Tracing] Refactor Transition Tracing Root Code ([facebook#24766](facebook/react#24766))" ([facebook#24829](facebook/react#24829)) //<Andrew Clark>//
- **[401296310](facebook/react@401296310 )**: [Transition Tracing] Refactor Transition Tracing Root Code ([facebook#24766](facebook/react#24766)) //<Luna Ruan>//
- **[185932902](facebook/react@185932902 )**: Track nearest Suspense handler on stack ([facebook#24585](facebook/react#24585)) //<Andrew Clark>//
- **[a7b192e0f](facebook/react@a7b192e0f )**: Add test gate alias for Offscreen ([facebook#24749](facebook/react#24749)) //<Andrew Clark>//
- **[6b6cf8311](facebook/react@6b6cf8311 )**: Land forked reconciler changes ([facebook#24817](facebook/react#24817)) //<Andrew Clark>//
- **[d1432ba93](facebook/react@d1432ba93 )**: [Transition Tracing] Fix excess calls to the transition start callback ([facebook#24806](facebook/react#24806)) //<Luna Ruan>//
- **[88574c1b8](facebook/react@88574c1b8 )**: Fix enableTransitionTracing flag ([facebook#24801](facebook/react#24801)) //<Luna Ruan>//
- **[a4bed4696](facebook/react@a4bed4696 )**: [Transition Tracing] Add Tracing Markers ([facebook#24686](facebook/react#24686)) //<Luna Ruan>//
- **[167853026](facebook/react@167853026 )**: fix hydration warning suppression in text comparisons ([facebook#24784](facebook/react#24784)) //<Josh Story>//
- **[9abe745aa](facebook/react@9abe745aa )**: [DevTools][Timeline Profiler] Component Stacks Backend ([facebook#24776](facebook/react#24776)) //<Luna Ruan>//
- **[cf665c4b7](facebook/react@cf665c4b7 )**: [DevTools] Refactor incompleteTransitions field from Root Fiber memoized state to FiberRoot ([facebook#24765](facebook/react#24765)) //<Luna Ruan>//
- **[56389e81f](facebook/react@56389e81f )**: Abort Flight ([facebook#24754](facebook/react#24754)) //<Sebastian Markbåge>//
- **[0f216ae31](facebook/react@0f216ae31 )**: Add entry points for "static" server rendering passes ([facebook#24752](facebook/react#24752)) //<Sebastian Markbåge>//
- **[f796fa13a](facebook/react@f796fa13a )**: Rename Segment to Task in Flight ([facebook#24753](facebook/react#24753)) //<Sebastian Markbåge>//
- **[0f0aca3ab](facebook/react@0f0aca3ab )**: Aborting early should not infinitely suspend ([facebook#24751](facebook/react#24751)) //<Sebastian Markbåge>//
- **[12a738f1a](facebook/react@12a738f1a )**: [Transition Tracing] Add Support for Multiple Transitions on Root ([facebook#24732](facebook/react#24732)) //<Luna Ruan>//
- **[72ebc703a](facebook/react@72ebc703a )**: [DevTools] fix useDeferredValue to match reconciler change ([facebook#24742](facebook/react#24742)) //<Mengdi Chen>//
- **[7cf9f5e03](facebook/react@7cf9f5e03 )**: Extra space ([facebook#24612](facebook/react#24612)) //<Kerim Büyükakyüz>//

Changelog:
[General][Changed] - React Native sync for revisions 229c86a...c1f5884

Reviewed By: mdvacca, GijsWeterings

Differential Revision: D38904311

fbshipit-source-id: 1e30bc420c30ec7a0c0073fc92a706afef4b3340
@slorber
Copy link
Contributor

slorber commented Jun 19, 2024

Hey, just stumbled upon react-dom/static

  • Is this still considered experimental?
  • Are there any docs for these exports?
  • Should I use this for Docusaurus SSG? (currently we use this)
  • Is it usable without rendering the full page? (ie, rendering just a div, and not html+body+div)

sebmarkbage added a commit that referenced this pull request Oct 20, 2024
When we added `renderToReadableStream` we added the `allReady` helper to
make it easier to do SSG rendering but it's kind of awkward to wire up
that way. Since we're also discouraging `renderToString` in React 19 the
cliff is kind of awkward. ([As noted by
Docusaurus.](#24752 (comment)))

The idea of the `react-dom/static` `prerender` API was that this would
be the replacement for SSG rendering. Awkwardly this entry point
actually already exists in stable but it has only `undefined` exports.

Since then we've also added other useful heuristics into the `prerender`
branch that makes this really the favored and easiest to use API for the
prerender (SSG/ISR) use case.

`prerender` is also used for Partial Prerendering but that part is still
experimental.

However, we can expose only the `prerender` API on `react-dom/static`
without it returning the `postponeState`. Instead the stream is on
`prelude`. The naming is a bit awkward if you don't consider resuming
but it's the same thing.

It's really just `renderToReadable` stream with automatic `allReady` and
better heuristics for prerendering.
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.

6 participants