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

Schedule prerender after something suspends #30800

Merged
merged 1 commit into from
Sep 4, 2024

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Aug 23, 2024

Part of a series of PRs related to sibling prerendering. I have the implementation working locally, but still working on splitting it up into a reasonable sequence of steps so we can land it incrementally. There's likely to be some regressions due to the scope of the change, so I've also done my best to keep the change behind a feature flag.

Opening this in draft mode while I continue to work on updating the test suite, which requires many changes.


Adds the concept of a "prerender". These special renders are spawned whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate phase that does not block the UI from updating. For example, during a transition, if something suspends, we should not speculatively prerender siblings that will be replaced by a fallback in the UI until after the fallback has been shown to the user.

Copy link

vercel bot commented Aug 23, 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 Sep 4, 2024 5:43pm

@react-sizebot
Copy link

react-sizebot commented Aug 27, 2024

Comparing: 8b4c54c...ff0b173

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 = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.37% 501.40 kB 503.23 kB +0.26% 89.99 kB 90.22 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.44% 508.22 kB 510.44 kB +0.34% 91.11 kB 91.42 kB
facebook-www/ReactDOM-prod.classic.js +0.38% 596.27 kB 598.56 kB +0.31% 105.72 kB 106.05 kB
facebook-www/ReactDOM-prod.modern.js +0.40% 572.56 kB 574.84 kB +0.31% 101.91 kB 102.22 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-art/cjs/react-art.production.js +0.70% 298.51 kB 300.60 kB +0.56% 51.51 kB 51.79 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.production.js +0.69% 303.15 kB 305.24 kB +0.51% 53.90 kB 54.17 kB
facebook-www/ReactART-prod.modern.js +0.62% 346.63 kB 348.79 kB +0.44% 59.05 kB 59.31 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.js +0.62% 385.06 kB 387.44 kB +0.49% 63.40 kB 63.71 kB
facebook-www/ReactART-prod.classic.js +0.59% 363.63 kB 365.80 kB +0.40% 61.81 kB 62.06 kB
oss-stable-rc/react-art/cjs/react-art.production.js +0.59% 292.08 kB 293.80 kB +0.38% 50.38 kB 50.57 kB
oss-stable-semver/react-art/cjs/react-art.production.js +0.59% 292.08 kB 293.80 kB +0.38% 50.38 kB 50.57 kB
oss-stable/react-art/cjs/react-art.production.js +0.59% 292.14 kB 293.86 kB +0.38% 50.40 kB 50.59 kB
react-native/implementations/ReactFabric-prod.fb.js +0.58% 373.82 kB 375.99 kB +0.43% 65.39 kB 65.68 kB
oss-stable-rc/react-test-renderer/cjs/react-test-renderer.production.js +0.57% 301.26 kB 302.98 kB +0.36% 53.52 kB 53.71 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.production.js +0.57% 301.26 kB 302.98 kB +0.36% 53.52 kB 53.71 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.production.js +0.57% 301.32 kB 303.04 kB +0.36% 53.54 kB 53.73 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js +0.57% 379.03 kB 381.19 kB +0.45% 66.54 kB 66.84 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.js +0.56% 413.50 kB 415.82 kB +0.42% 67.52 kB 67.80 kB
facebook-www/ReactReconciler-prod.modern.js +0.55% 438.08 kB 440.50 kB +0.42% 71.43 kB 71.74 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-prod.js +0.54% 318.75 kB 320.47 kB +0.34% 56.43 kB 56.62 kB
react-native/implementations/ReactFabric-profiling.fb.js +0.53% 401.42 kB 403.56 kB +0.45% 69.69 kB 70.01 kB
facebook-www/ReactReconciler-prod.classic.js +0.53% 456.84 kB 459.27 kB +0.41% 74.21 kB 74.51 kB
react-native/implementations/ReactNativeRenderer-profiling.fb.js +0.52% 406.60 kB 408.74 kB +0.44% 70.76 kB 71.08 kB
oss-stable-rc/react-reconciler/cjs/react-reconciler.production.js +0.52% 377.45 kB 379.41 kB +0.35% 62.13 kB 62.35 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.js +0.52% 377.45 kB 379.41 kB +0.35% 62.13 kB 62.35 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.js +0.52% 377.47 kB 379.43 kB +0.35% 62.15 kB 62.37 kB
react-native/implementations/ReactFabric-prod.js +0.50% 346.60 kB 348.33 kB +0.32% 60.92 kB 61.11 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js +0.48% 342.71 kB 344.37 kB +0.34% 59.90 kB 60.10 kB
react-native/implementations/ReactNativeRenderer-prod.js +0.48% 355.94 kB 357.66 kB +0.36% 62.52 kB 62.75 kB
oss-stable-rc/react-reconciler/cjs/react-reconciler.profiling.js +0.47% 405.85 kB 407.77 kB +0.29% 66.18 kB 66.37 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.js +0.47% 405.85 kB 407.77 kB +0.29% 66.18 kB 66.37 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.js +0.47% 405.87 kB 407.79 kB +0.30% 66.20 kB 66.39 kB
react-native/implementations/ReactFabric-profiling.js +0.45% 373.97 kB 375.64 kB +0.30% 65.03 kB 65.22 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.44% 508.22 kB 510.44 kB +0.34% 91.11 kB 91.42 kB
react-native/implementations/ReactNativeRenderer-profiling.js +0.44% 383.25 kB 384.91 kB +0.28% 66.76 kB 66.95 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.js +0.42% 522.95 kB 525.17 kB +0.34% 94.77 kB 95.10 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js +0.40% 543.77 kB 545.95 kB +0.31% 89.13 kB 89.41 kB
oss-experimental/react-dom/cjs/react-dom-profiling.profiling.js +0.40% 541.13 kB 543.29 kB +0.35% 96.32 kB 96.66 kB
facebook-www/ReactDOM-prod.modern.js +0.40% 572.56 kB 574.84 kB +0.31% 101.91 kB 102.22 kB
oss-experimental/react-art/cjs/react-art.development.js +0.39% 558.47 kB 560.65 kB +0.28% 90.44 kB 90.69 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.39% 587.29 kB 589.58 kB +0.31% 105.63 kB 105.95 kB
facebook-www/ReactDOM-prod.classic.js +0.38% 596.27 kB 598.56 kB +0.31% 105.72 kB 106.05 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.37% 611.01 kB 613.29 kB +0.32% 109.42 kB 109.77 kB
facebook-www/ReactDOM-profiling.modern.js +0.37% 602.00 kB 604.24 kB +0.33% 106.19 kB 106.54 kB
oss-stable-rc/react-dom/cjs/react-dom-client.production.js +0.37% 501.29 kB 503.12 kB +0.26% 89.96 kB 90.20 kB
oss-stable-semver/react-dom/cjs/react-dom-client.production.js +0.37% 501.29 kB 503.12 kB +0.26% 89.96 kB 90.20 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.37% 501.40 kB 503.23 kB +0.26% 89.99 kB 90.22 kB
facebook-www/ReactART-dev.modern.js +0.36% 622.80 kB 625.04 kB +0.26% 100.24 kB 100.50 kB
facebook-www/ReactDOM-profiling.classic.js +0.36% 626.36 kB 628.59 kB +0.28% 110.19 kB 110.51 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.35% 642.56 kB 644.81 kB +0.25% 103.37 kB 103.63 kB
facebook-www/ReactART-dev.classic.js +0.35% 646.13 kB 648.38 kB +0.26% 103.98 kB 104.25 kB
react-native/implementations/ReactFabric-dev.fb.js +0.34% 654.74 kB 656.99 kB +0.22% 107.20 kB 107.44 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.34% 660.42 kB 662.67 kB +0.22% 108.62 kB 108.86 kB
oss-stable-rc/react-dom/cjs/react-dom-profiling.profiling.js +0.33% 534.19 kB 535.97 kB +0.26% 95.12 kB 95.36 kB
oss-stable-semver/react-dom/cjs/react-dom-profiling.profiling.js +0.33% 534.19 kB 535.97 kB +0.26% 95.12 kB 95.36 kB
oss-stable/react-dom/cjs/react-dom-profiling.profiling.js +0.33% 534.30 kB 536.07 kB +0.25% 95.14 kB 95.38 kB
facebook-www/ReactReconciler-dev.modern.js +0.33% 709.56 kB 711.88 kB +0.26% 113.39 kB 113.68 kB
oss-stable-rc/react-test-renderer/cjs/react-test-renderer.development.js +0.32% 541.77 kB 543.51 kB +0.22% 88.79 kB 88.98 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js +0.32% 541.77 kB 543.51 kB +0.22% 88.79 kB 88.98 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js +0.32% 541.84 kB 543.57 kB +0.22% 88.81 kB 89.01 kB
oss-stable-rc/react-art/cjs/react-art.development.js +0.32% 544.90 kB 546.63 kB +0.20% 88.68 kB 88.85 kB
oss-stable-semver/react-art/cjs/react-art.development.js +0.32% 544.90 kB 546.63 kB +0.20% 88.68 kB 88.85 kB
oss-stable/react-art/cjs/react-art.development.js +0.32% 544.96 kB 546.70 kB +0.20% 88.70 kB 88.88 kB
facebook-www/ReactReconciler-dev.classic.js +0.32% 734.32 kB 736.64 kB +0.25% 117.53 kB 117.82 kB
facebook-www/ReactTestRenderer-dev.modern.js +0.31% 567.96 kB 569.69 kB +0.16% 93.27 kB 93.42 kB
facebook-www/ReactTestRenderer-dev.classic.js +0.31% 567.96 kB 569.70 kB +0.16% 93.27 kB 93.42 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js +0.30% 575.06 kB 576.80 kB +0.18% 94.03 kB 94.19 kB
oss-stable-rc/react-reconciler/cjs/react-reconciler.development.js +0.28% 629.47 kB 631.26 kB +0.17% 101.57 kB 101.75 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.28% 629.47 kB 631.26 kB +0.17% 101.57 kB 101.75 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.28% 629.49 kB 631.28 kB +0.17% 101.60 kB 101.77 kB
react-native/implementations/ReactFabric-dev.js +0.28% 627.22 kB 628.95 kB +0.15% 102.94 kB 103.10 kB
react-native/implementations/ReactNativeRenderer-dev.js +0.27% 637.96 kB 639.69 kB +0.16% 105.05 kB 105.22 kB
oss-experimental/react-dom/cjs/react-dom-client.development.js +0.24% 944.70 kB 946.95 kB +0.18% 160.02 kB 160.31 kB
oss-experimental/react-dom/cjs/react-dom-profiling.development.js +0.23% 961.14 kB 963.39 kB +0.17% 162.85 kB 163.13 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js +0.23% 961.64 kB 963.89 kB +0.16% 163.87 kB 164.13 kB
facebook-www/ReactDOM-dev.modern.js +0.22% 1,041.80 kB 1,044.13 kB +0.16% 175.28 kB 175.56 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.22% 1,058.71 kB 1,061.03 kB +0.16% 179.15 kB 179.44 kB
facebook-www/ReactDOM-dev.classic.js +0.22% 1,078.63 kB 1,080.95 kB +0.16% 181.29 kB 181.57 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.21% 1,095.53 kB 1,097.85 kB +0.16% 185.24 kB 185.53 kB
test_utils/ReactAllWarnings.js = 64.07 kB 63.94 kB = 15.86 kB 15.83 kB

Generated by 🚫 dangerJS against 42b8a5f

Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

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

We'll see what's necessary to fix the remaining tests but this looks good.

Copy link
Collaborator

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

some nits. Test changes make sense given the explainer.

Still need to wrap my head around

For example, during a transition, if something suspends, we should not speculatively prerender siblings that will be replaced by a fallback in the UI until after the fallback has been shown to the user.

is there a test for this scenario?


// If there are no unsuspended or pinged lanes, that implies that we're
// performing a prerender.
return unblockedLanes === 0;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
return unblockedLanes === 0;
return unblockedLanes === NoLanes;

@@ -191,6 +199,7 @@ describe('ReactCache', () => {
}
});

// @gate enableSiblingPrerendering
Copy link
Collaborator

Choose a reason for hiding this comment

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

Shouldn't this be inlined into a different set of assertions?

@kassens
Copy link
Member

kassens commented Aug 28, 2024

An internal test run of this looks good so far (https://fburl.com/diff/bijwbv45)

Adds the concept of a "prerender". These special renders are spawned
whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate
phase that does not block the UI from updating. For example, during a
transition, if something suspends, we should not speculatively
prerender siblings that will be replaced by a fallback in the UI until
*after* the fallback has been shown to the user.
@acdlite acdlite merged commit e10e868 into facebook:main Sep 4, 2024
184 checks passed
github-actions bot pushed a commit that referenced this pull request Sep 4, 2024
Adds the concept of a "prerender". These special renders are spawned
whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate phase
that does not block the UI from updating. For example, during a
transition, if something suspends, we should not speculatively prerender
siblings that will be replaced by a fallback in the UI until *after* the
fallback has been shown to the user.

DiffTrain build for commit e10e868.
github-actions bot pushed a commit that referenced this pull request Sep 4, 2024
Adds the concept of a "prerender". These special renders are spawned
whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate phase
that does not block the UI from updating. For example, during a
transition, if something suspends, we should not speculatively prerender
siblings that will be replaced by a fallback in the UI until *after* the
fallback has been shown to the user.

DiffTrain build for [e10e868](e10e868)
jayrito12 added a commit to jayrito12/reactjcl that referenced this pull request Sep 4, 2024
Adds the concept of a "prerender". These special renders are spawned
whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate phase
that does not block the UI from updating. For example, during a
transition, if something suspends, we should not speculatively prerender
siblings that will be replaced by a fallback in the UI until *after* the
fallback has been shown to the user.
gnoff pushed a commit to vercel/next.js that referenced this pull request Sep 12, 2024
**breaking change for canary users: Bumps peer dependency of React from
`19.0.0-rc-7771d3a7-20240827` to `19.0.0-rc-94e652d5-20240912`**

[diff
facebook/react@7771d3a7...94e652d5](facebook/react@7771d3a...94e652d)

<details>
<summary>React upstream changes</summary>

- facebook/react#30952
- facebook/react#30950
- facebook/react#30946
- facebook/react#30934
- facebook/react#30947
- facebook/react#30945
- facebook/react#30938
- facebook/react#30936
- facebook/react#30879
- facebook/react#30888
- facebook/react#30931
- facebook/react#30930
- facebook/react#30832
- facebook/react#30929
- facebook/react#30926
- facebook/react#30925
- facebook/react#30905
- facebook/react#30900
- facebook/react#30910
- facebook/react#30906
- facebook/react#30899
- facebook/react#30919
- facebook/react#30708
- facebook/react#30907
- facebook/react#30897
- facebook/react#30896
- facebook/react#30895
- facebook/react#30887
- facebook/react#30889
- facebook/react#30893
- facebook/react#30892
- facebook/react#30891
- facebook/react#30882
- facebook/react#30881
- facebook/react#30870
- facebook/react#30849
- facebook/react#30878
- facebook/react#30865
- facebook/react#30869
- facebook/react#30875
- facebook/react#30800
- facebook/react#30762
- facebook/react#30831
- facebook/react#30866
- facebook/react#30853
- facebook/react#30850
- facebook/react#30847
- facebook/react#30842
- facebook/react#30837
- facebook/react#30848
- facebook/react#30844
- facebook/react#30839
- facebook/react#30802
- facebook/react#30841
- facebook/react#30827
- facebook/react#30826
- facebook/react#30825
- facebook/react#30824
- facebook/react#30840
- facebook/react#30838
- facebook/react#30836
- facebook/react#30819
- facebook/react#30816
- facebook/react#30814
- facebook/react#30813
- facebook/react#30812
- facebook/react#30811

</details>

---------

Co-authored-by: vercel-release-bot <infra+release@vercel.com>
mofeiZ added a commit that referenced this pull request Oct 11, 2024
Adds the concept of a "prerender". These special renders are spawned
whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate phase
that does not block the UI from updating. For example, during a
transition, if something suspends, we should not speculatively prerender
siblings that will be replaced by a fallback in the UI until *after* the
fallback has been shown to the user.

[ghstack-poisoned]
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.

7 participants