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 option to inject bootstrapping script tags after the shell is injected #22594

Merged
merged 3 commits into from
Oct 20, 2021

Conversation

sebmarkbage
Copy link
Collaborator

This adds three options to the Fizz server renderers:

bootstrapScriptContent?: string, // inline script
bootstrapScripts: Array<string>, // src urls
bootstrapModules: Array<string>, // src urls

These inject three different type of extra script tags into the document:

<script>{bootstrapScriptContent}</script>
<script src="{bootstrapScript}" async=""></script>
<script type="module" src="{bootstrapModule}" async=""></script>

These option exist to kick off the hydration. Hydration should start after the root shell (for example the html/body) has been flushed to the client but before the whole stream is done. You can start hydration before the last boundary has fully resolved.

In current implementations, you often inject most script tags in user space hacks around React but it's tricky to know the perfect timing for when to emit things that end up right after the shell as already been written so we might as well have this built in.

However, longer term we expect to be able to render everything with just React.

Generally you don't need to inject script tags into the document because the module system runtime does that for you once you're already rendering (e.g. Webpack or just native modules). The exception to this is the actual bootstrapping code. This was awkward to do from within React which is why we have some weird cyclic workarounds in the fixtures to be able to render the bootstrap script tag with React.

It doesn't make sense because even if you're rendering the whole document with React, conceptually whatever started React itself is outside the document. So that's what this option is for.

I was able to remove the hack for script tags in the fixtures. However, there's still a similar hack for loading the CSS. That will need a slightly different approach because that should actually be referenced from the module that uses it.

Another reason to inject script tags into a HTML stream is to preload them. However, that kind of preloading is a dependency from the module that uses them. That's also applicable on the client - for preloading scripts you know you'll need soon. That will get another built-in API in the future.

Note: Scripts are always async - there's no defer. It doesn't make sense to use defer in this streaming model because those block until the end of the stream so starting hydration early doesn't work with defer.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Oct 20, 2021
@sizebot
Copy link

sizebot commented Oct 20, 2021

Comparing: 3677c01...b4d79d4

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 = 130.21 kB 130.21 kB = 41.42 kB 41.42 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 133.04 kB 133.04 kB = 42.40 kB 42.40 kB
facebook-www/ReactDOM-prod.classic.js = 414.69 kB 414.69 kB = 76.59 kB 76.59 kB
facebook-www/ReactDOM-prod.modern.js = 403.28 kB 403.28 kB = 74.85 kB 74.86 kB
facebook-www/ReactDOMForked-prod.classic.js = 414.69 kB 414.69 kB = 76.60 kB 76.60 kB
facebook-www/ReactDOMServer-prod.modern.js +2.11% 71.19 kB 72.70 kB +1.70% 15.34 kB 15.61 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMServer-prod.modern.js +2.11% 71.19 kB 72.70 kB +1.70% 15.34 kB 15.61 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +1.49% 31.42 kB 31.89 kB +1.35% 10.70 kB 10.84 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +1.49% 31.42 kB 31.89 kB +1.35% 10.70 kB 10.84 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +1.49% 31.55 kB 32.02 kB +1.31% 10.75 kB 10.89 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +1.48% 31.59 kB 32.06 kB +1.33% 10.81 kB 10.96 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +1.48% 31.59 kB 32.06 kB +1.33% 10.81 kB 10.96 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +1.47% 31.73 kB 32.20 kB +1.32% 10.87 kB 11.01 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +1.45% 31.69 kB 32.15 kB +1.47% 10.70 kB 10.86 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +1.45% 31.69 kB 32.15 kB +1.47% 10.70 kB 10.86 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +1.44% 31.82 kB 32.28 kB +1.43% 10.76 kB 10.92 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.development.js +1.44% 5.84 kB 5.92 kB +0.91% 1.64 kB 1.66 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.development.js +1.44% 5.84 kB 5.92 kB +0.91% 1.64 kB 1.66 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.development.js +1.44% 5.84 kB 5.92 kB +0.91% 1.64 kB 1.66 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +1.44% 2.85 kB 2.89 kB +0.90% 1.11 kB 1.12 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +1.44% 2.85 kB 2.89 kB +0.90% 1.11 kB 1.12 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +1.44% 2.85 kB 2.89 kB +0.90% 1.11 kB 1.12 kB
facebook-www/ReactDOMServer-dev.modern.js +0.76% 219.08 kB 220.74 kB +0.63% 52.00 kB 52.33 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +0.70% 216.88 kB 218.39 kB +0.56% 52.56 kB 52.86 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +0.70% 216.88 kB 218.39 kB +0.56% 52.56 kB 52.86 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +0.70% 216.88 kB 218.40 kB +0.56% 52.46 kB 52.75 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +0.70% 216.88 kB 218.40 kB +0.56% 52.46 kB 52.75 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +0.70% 217.40 kB 218.92 kB +0.56% 52.72 kB 53.01 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +0.70% 217.41 kB 218.92 kB +0.56% 52.61 kB 52.90 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +0.69% 227.73 kB 229.30 kB +0.56% 53.14 kB 53.44 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +0.69% 227.73 kB 229.30 kB +0.56% 53.14 kB 53.44 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +0.69% 228.28 kB 229.86 kB +0.56% 53.30 kB 53.59 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.65% 219.45 kB 220.87 kB +0.52% 52.92 kB 53.20 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.65% 219.45 kB 220.87 kB +0.52% 52.92 kB 53.20 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.64% 219.98 kB 221.40 kB +0.51% 53.07 kB 53.35 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +0.64% 221.07 kB 222.49 kB +0.52% 53.36 kB 53.63 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +0.64% 221.07 kB 222.49 kB +0.52% 53.36 kB 53.63 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +0.64% 230.46 kB 231.94 kB +0.52% 53.51 kB 53.79 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +0.64% 230.46 kB 231.94 kB +0.52% 53.51 kB 53.79 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +0.64% 221.59 kB 223.01 kB +0.52% 53.51 kB 53.79 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +0.64% 231.02 kB 232.49 kB +0.53% 53.66 kB 53.95 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js +0.34% 17.08 kB 17.13 kB +0.19% 5.89 kB 5.90 kB
oss-stable/react-server/cjs/react-server.production.min.js +0.34% 17.08 kB 17.13 kB +0.19% 5.89 kB 5.90 kB
oss-experimental/react-server/cjs/react-server.production.min.js +0.34% 17.20 kB 17.26 kB +0.20% 5.93 kB 5.94 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.29% 31.35 kB 31.44 kB +0.44% 10.50 kB 10.55 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.29% 31.35 kB 31.44 kB +0.44% 10.50 kB 10.55 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.29% 31.49 kB 31.58 kB +0.45% 10.56 kB 10.60 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.29% 31.16 kB 31.25 kB +0.28% 10.38 kB 10.41 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.29% 31.16 kB 31.25 kB +0.28% 10.38 kB 10.41 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.29% 31.29 kB 31.38 kB +0.28% 10.44 kB 10.46 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.29% 31.76 kB 31.85 kB +0.26% 10.59 kB 10.62 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.29% 31.76 kB 31.85 kB +0.26% 10.59 kB 10.62 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.29% 31.89 kB 31.98 kB +0.26% 10.65 kB 10.68 kB

Generated by 🚫 dangerJS against b4d79d4

@sebmarkbage sebmarkbage merged commit cdb8a1d into facebook:main Oct 20, 2021
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Nov 2, 2021
Summary:
This sync includes the following changes:
- **[5cccacd13](facebook/react@5cccacd13 )**: Upgrade useId to alpha channel ([#22674](facebook/react#22674)) //<Andrew Clark>//
- **[75f3ddebf](facebook/react@75f3ddebf )**: Remove experimental useOpaqueIdentifier API ([#22672](facebook/react#22672)) //<Andrew Clark>//
- **[8c4a05b8f](facebook/react@8c4a05b8f )**: Remove flow pragma comment from module registration start/stop templates ([#22670](facebook/react#22670)) //<Brian Vaughn>//
- **[ebf9ae857](facebook/react@ebf9ae857 )**: useId ([#22644](facebook/react#22644)) //<Andrew Clark>//
- **[a0d991fe6](facebook/react@a0d991fe6 )**: Re-land #22292 (remove uMS from open source build) ([#22664](facebook/react#22664)) //<Andrew Clark>//
- **[6bce0355c](facebook/react@6bce0355c )**: Upgrade useSyncExternalStore to alpha channel ([#22662](facebook/react#22662)) //<Andrew Clark>//
- **[7034408ff](facebook/react@7034408ff )**: Follow-up improvements to error code extraction infra ([#22516](facebook/react#22516)) //<Andrew Clark>//
- **[90e5d3638](facebook/react@90e5d3638 )**: chore: fix comment typo ([#22615](facebook/react#22615)) //<btea>//
- **[3c4c1c470](facebook/react@3c4c1c470 )**: Remove warning for dangling passive effects ([#22609](facebook/react#22609)) //<Andrew Clark>//
- **[d5b6b4b86](facebook/react@d5b6b4b86 )**: Expand act warning to cover all APIs that might schedule React work ([#22607](facebook/react#22607)) //<Andrew Clark>//
- **[fa9bea0c4](facebook/react@fa9bea0c4 )**: Initial implementation of cache cleanup ([#22510](facebook/react#22510)) //<Joseph Savona>//
- **[0e8a5aff3](facebook/react@0e8a5aff3 )**: Scheduling Profiler: Add marks for component effects (mount and unmount) ([#22578](facebook/react#22578)) //<Brian Vaughn>//
- **[4ba20579d](facebook/react@4ba20579d )**: Scheduling Profiler: De-emphasize React internal frames ([#22588](facebook/react#22588)) //<Brian Vaughn>//
- **[cdb8a1d19](facebook/react@cdb8a1d19 )**: [Fizz] Add option to inject bootstrapping script tags after the shell is injected ([#22594](facebook/react#22594)) //<Sebastian Markbåge>//
- **[34e4c9756](facebook/react@34e4c9756 )**: Clear extra nodes if there's a hydration mismatch within a suspense boundary  ([#22592](facebook/react#22592)) //<Sebastian Markbåge>//
- **[02f411578](facebook/react@02f411578 )**: Upgrade useInsertionEffect to stable ([#22589](facebook/react#22589)) //<Andrew Clark>//
- **[2af4a7933](facebook/react@2af4a7933 )**: Hydrate using SuspenseComponent as the parent ([#22582](facebook/react#22582)) //<Sebastian Markbåge>//
- **[b1acff0cc](facebook/react@b1acff0cc )**: Enable cache in test renderer ([#22580](facebook/react#22580)) //<Joseph Savona>//
- **[996da67b2](facebook/react@996da67b2 )**: Replace global `jest` heuristic with `IS_REACT_ACT_ENVIRONMENT` ([#22562](facebook/react#22562)) //<Andrew Clark>//
- **[163e81c1f](facebook/react@163e81c1f )**: Support disabling spurious act warnings with a global environment flag ([#22561](facebook/react#22561)) //<Andrew Clark>//
- **[23b7dfeff](facebook/react@23b7dfeff )**: Enable scheduling profiler for RN FB profiling builds ([#22566](facebook/react#22566)) //<Brian Vaughn>//
- **[61455a25b](facebook/react@61455a25b )**: Enable experimental Cache API in www TestRenderer ([#22554](facebook/react#22554)) //<Joseph Savona>//
- **[7142d110b](facebook/react@7142d110b )**: Bugfix: Nested useOpaqueIdentifier references ([#22553](facebook/react#22553)) //<Andrew Clark>//
- **[1e247ff89](facebook/react@1e247ff89 )**: Enabled scheduling profiler marks for React Native FB target ([#22544](facebook/react#22544)) //<Brian Vaughn>//
- **[c16b005f2](facebook/react@c16b005f2 )**: Update test and stack frame code to support newer V8 stack formats ([#22477](facebook/react#22477)) //<Brian Vaughn>//
- **[55d75005b](facebook/react@55d75005b )**: duplicate value in variable ([#22390](facebook/react#22390)) //<BIKI DAS>//

Changelog:
[General][Changed] - React Native sync for revisions afcb9cd...3fcd81d

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D32065987

fbshipit-source-id: ef2d402835c981aab68ca40a894c66c1630864e9
KamranAsif pushed a commit to KamranAsif/react that referenced this pull request Nov 4, 2021
… is injected (facebook#22594)

* Add option to inject bootstrap scripts

These are emitted right after the shell as flushed.

* Update ssr fixtures to use bootstrapScripts instead of manual script tag

* Add option to FB renderer too
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Nov 15, 2021
Summary:
This sync includes the following changes:
- **[c0c71a868](facebook/react@c0c71a868 )**: Re-enable useMutableSource in internal RN ([#22750](facebook/react#22750)) //<Ricky>//
- **[cb11155c8](facebook/react@cb11155c8 )**: Add runtime type checks around module boundary code ([#22748](facebook/react#22748)) //<Brian Vaughn>//
- **[a04f13d29](facebook/react@a04f13d29 )**: react-refresh@0.11.0 //<Dan Abramov>//
- **[ff9897d23](facebook/react@ff9897d23 )**: [React Refresh] support typescript namespace syntax ([#22621](facebook/react#22621)) //<irinakk>//
- **[0ddd69d12](facebook/react@0ddd69d12 )**: Throw on hydration mismatch and force client rendering if boundary hasn't suspended within concurrent root ([#22629](facebook/react#22629)) //<salazarm>//
- **[c3f34e4be](facebook/react@c3f34e4be )**: eslint-plugin-react-hooks@4.3.0 //<Dan Abramov>//
- **[827021c4e](facebook/react@827021c4e )**: Changelog for eslint-plugin-react-hooks@4.3.0 //<Dan Abramov>//
- **[8ca3f567b](facebook/react@8ca3f567b )**: Fix module-boundary wrappers ([#22688](facebook/react#22688)) //<Brian Vaughn>//
- **[1bf6deb86](facebook/react@1bf6deb86 )**: Renamed packages/react-devtools-scheduling-profiler to packages/react-devtools-timeline ([#22691](facebook/react#22691)) //<Brian Vaughn>//
- **[51c558aeb](facebook/react@51c558aeb )**: Rename (some) "scheduling profiler" references to "timeline" ([#22690](facebook/react#22690)) //<Brian Vaughn>//
- **[00ced1e2b](facebook/react@00ced1e2b )**: Fix useId in strict mode ([#22681](facebook/react#22681)) //<Andrew Clark>//
- **[5cccacd13](facebook/react@5cccacd13 )**: Upgrade useId to alpha channel ([#22674](facebook/react#22674)) //<Andrew Clark>//
- **[75f3ddebf](facebook/react@75f3ddebf )**: Remove experimental useOpaqueIdentifier API ([#22672](facebook/react#22672)) //<Andrew Clark>//
- **[8c4a05b8f](facebook/react@8c4a05b8f )**: Remove flow pragma comment from module registration start/stop templates ([#22670](facebook/react#22670)) //<Brian Vaughn>//
- **[ebf9ae857](facebook/react@ebf9ae857 )**: useId ([#22644](facebook/react#22644)) //<Andrew Clark>//
- **[a0d991fe6](facebook/react@a0d991fe6 )**: Re-land #22292 (remove uMS from open source build) ([#22664](facebook/react#22664)) //<Andrew Clark>//
- **[6bce0355c](facebook/react@6bce0355c )**: Upgrade useSyncExternalStore to alpha channel ([#22662](facebook/react#22662)) //<Andrew Clark>//
- **[7034408ff](facebook/react@7034408ff )**: Follow-up improvements to error code extraction infra ([#22516](facebook/react#22516)) //<Andrew Clark>//
- **[90e5d3638](facebook/react@90e5d3638 )**: chore: fix comment typo ([#22615](facebook/react#22615)) //<btea>//
- **[3c4c1c470](facebook/react@3c4c1c470 )**: Remove warning for dangling passive effects ([#22609](facebook/react#22609)) //<Andrew Clark>//
- **[d5b6b4b86](facebook/react@d5b6b4b86 )**: Expand act warning to cover all APIs that might schedule React work ([#22607](facebook/react#22607)) //<Andrew Clark>//
- **[fa9bea0c4](facebook/react@fa9bea0c4 )**: Initial implementation of cache cleanup ([#22510](facebook/react#22510)) //<Joseph Savona>//
- **[0e8a5aff3](facebook/react@0e8a5aff3 )**: Scheduling Profiler: Add marks for component effects (mount and unmount) ([#22578](facebook/react#22578)) //<Brian Vaughn>//
- **[4ba20579d](facebook/react@4ba20579d )**: Scheduling Profiler: De-emphasize React internal frames ([#22588](facebook/react#22588)) //<Brian Vaughn>//
- **[cdb8a1d19](facebook/react@cdb8a1d19 )**: [Fizz] Add option to inject bootstrapping script tags after the shell is injected ([#22594](facebook/react#22594)) //<Sebastian Markbåge>//
- **[34e4c9756](facebook/react@34e4c9756 )**: Clear extra nodes if there's a hydration mismatch within a suspense boundary  ([#22592](facebook/react#22592)) //<Sebastian Markbåge>//
- **[02f411578](facebook/react@02f411578 )**: Upgrade useInsertionEffect to stable ([#22589](facebook/react#22589)) //<Andrew Clark>//
- **[2af4a7933](facebook/react@2af4a7933 )**: Hydrate using SuspenseComponent as the parent ([#22582](facebook/react#22582)) //<Sebastian Markbåge>//
- **[b1acff0cc](facebook/react@b1acff0cc )**: Enable cache in test renderer ([#22580](facebook/react#22580)) //<Joseph Savona>//
- **[996da67b2](facebook/react@996da67b2 )**: Replace global `jest` heuristic with `IS_REACT_ACT_ENVIRONMENT` ([#22562](facebook/react#22562)) //<Andrew Clark>//
- **[163e81c1f](facebook/react@163e81c1f )**: Support disabling spurious act warnings with a global environment flag ([#22561](facebook/react#22561)) //<Andrew Clark>//
- **[23b7dfeff](facebook/react@23b7dfeff )**: Enable scheduling profiler for RN FB profiling builds ([#22566](facebook/react#22566)) //<Brian Vaughn>//
- **[61455a25b](facebook/react@61455a25b )**: Enable experimental Cache API in www TestRenderer ([#22554](facebook/react#22554)) //<Joseph Savona>//
- **[7142d110b](facebook/react@7142d110b )**: Bugfix: Nested useOpaqueIdentifier references ([#22553](facebook/react#22553)) //<Andrew Clark>//
- **[1e247ff89](facebook/react@1e247ff89 )**: Enabled scheduling profiler marks for React Native FB target ([#22544](facebook/react#22544)) //<Brian Vaughn>//
- **[c16b005f2](facebook/react@c16b005f2 )**: Update test and stack frame code to support newer V8 stack formats ([#22477](facebook/react#22477)) //<Brian Vaughn>//
- **[55d75005b](facebook/react@55d75005b )**: duplicate value in variable ([#22390](facebook/react#22390)) //<BIKI DAS>//

Changelog:
[General][Changed] - React Native sync for revisions afcb9cd...c0c71a8

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D32395873

fbshipit-source-id: 3afd158f167b1eedcc244e29aba1a2c502d3c9d9
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
… is injected (facebook#22594)

* Add option to inject bootstrap scripts

These are emitted right after the shell as flushed.

* Update ssr fixtures to use bootstrapScripts instead of manual script tag

* Add option to FB renderer too
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants