Prevent storing page props cache when in SSG + preview mode #30757

kamsar · 2021-11-01T19:05:07Z

In Next 12, router.replace() treats the page props cache as authoritative when fetching SSG props in preview mode. This makes sense outside preview mode (static props won't change), but within preview mode this prevents reloading the preview data dynamically without force-refreshing the page.

This PR fixes the problem by instructing Next to bypass the props cache if it's an SSG route AND preview mode is on.

Repro: https://github.com/kamsar/next-replace-previewmode-staticprops/blob/main/pages/index.js

Bug

Related issues linked using fixes #number: Fixes Router does not replace page props when in SSG + preview mode #30756
Integration tests added: Did not find existing tests for the router, but I'd be happy to write one if someone could point me in the right direction.

In Next 12, `router.replace()` treats the page props cache as authoritative when fetching SSG props in preview mode. This makes sense outside preview mode (static props won't change), but within preview mode this prevents reloading the preview data dynamically without force-refreshing the page. This PR fixes the problem by instructing Next to bypass the props cache not only if it's an SSG route, but also only if preview mode is off. Repro: https://github.com/kamsar/next-replace-previewmode-staticprops/blob/main/pages/index.js

styfle

Thanks!

Can you also add a test so we don't regress in the future?

Probably in test/integration/preload-viewport/test/index.test.js like in #30125 for example.

kamsar · 2021-11-01T20:25:07Z

I think I got a reasonable test. Put it in the preview mode tests instead of the preloading section, that seemed to be the right place after a deeper look but let me know if it needs refactoring.

ijjk

Change and added test look good, thanks for the PR!

ijjk · 2021-11-02T00:26:44Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
buildDuration	21.7s	21.9s	⚠️ +168ms
buildDurationCached	4.6s	5s	⚠️ +445ms
nodeModulesSize	293 MB	293 MB	⚠️ +55 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.536	3.65	⚠️ +0.11
/ avg req/sec	706.97	684.98	⚠️ -21.99
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.939	1.943	0
/error-in-render avg req/sec	1289.3	1286.85	⚠️ -2.45

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28 kB	28 kB	⚠️ +5 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	71.9 kB	71.9 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
index.html gzip	534 B	533 B	-1 B
link.html gzip	547 B	546 B	-1 B
withRouter.html gzip	527 B	527 B	✓
Overall change	1.61 kB	1.61 kB	-2 B

Diffs

Diff for main-HASH.js

@@ -5410,7 +5410,7 @@
                                       _this.isSsr,
                                       false,
                                       __N_SSG ? _this.sdc : _this.sdr,
-                                      !!__N_SSG
+                                      !!__N_SSG && !_this.isPreview
                                     )
                                   : _this.getInitialProps(Component, {
                                       pathname: pathname,

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0c4da03f1c3d4247.js"
+      src="/_next/static/chunks/main-68fa873eab4f9b66.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0c4da03f1c3d4247.js"
+      src="/_next/static/chunks/main-68fa873eab4f9b66.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0c4da03f1c3d4247.js"
+      src="/_next/static/chunks/main-68fa873eab4f9b66.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
buildDuration	25.4s	25s	-390ms
buildDurationCached	4.7s	4.6s	-167ms
nodeModulesSize	293 MB	293 MB	⚠️ +55 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.74	3.97	⚠️ +0.23
/ avg req/sec	668.42	629.74	⚠️ -38.68
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.991	2.253	⚠️ +0.26
/error-in-render avg req/sec	1255.8	1109.8	⚠️ -146

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	⚠️ +6 B
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	72.1 kB	72.1 kB	⚠️ +6 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	kamsar/next.js fix/ssg-router-refresh-preview-mode	Change
index.html gzip	535 B	534 B	-1 B
link.html gzip	548 B	547 B	-1 B
withRouter.html gzip	529 B	528 B	-1 B
Overall change	1.61 kB	1.61 kB	-3 B

Diffs

Diff for main-HASH.js

@@ -5410,7 +5410,7 @@
                                       _this.isSsr,
                                       false,
                                       __N_SSG ? _this.sdc : _this.sdr,
-                                      !!__N_SSG
+                                      !!__N_SSG && !_this.isPreview
                                     )
                                   : _this.getInitialProps(Component, {
                                       pathname: pathname,

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0c4da03f1c3d4247.js"
+      src="/_next/static/chunks/main-68fa873eab4f9b66.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0c4da03f1c3d4247.js"
+      src="/_next/static/chunks/main-68fa873eab4f9b66.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0c4da03f1c3d4247.js"
+      src="/_next/static/chunks/main-68fa873eab4f9b66.js"
       defer=""
     ></script>
     <script

Commit: 2d3c359

…0757) In Next 12, `router.replace()` treats the page props cache as authoritative when fetching SSG props in preview mode. This makes sense outside preview mode (static props won't change), but within preview mode this prevents reloading the preview data dynamically without force-refreshing the page. This PR fixes the problem by instructing Next to bypass the props cache if it's an SSG route AND preview mode is on. Repro: https://github.com/kamsar/next-replace-previewmode-staticprops/blob/main/pages/index.js ## Bug - [x] Related issues linked using `fixes #number`: Fixes vercel#30756 - [ ] Integration tests added: Did not find existing tests for the router, but I'd be happy to write one if someone could point me in the right direction.

kamsar requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners November 1, 2021 19:05

ijjk added the type: next label Nov 1, 2021

styfle reviewed Nov 1, 2021

View reviewed changes

Added test for page props being dynamic in preview SSG mode

3199a73

kamsar requested a review from styfle November 1, 2021 20:24

Merge branch 'canary' into fix/ssg-router-refresh-preview-mode

93a9420

ijjk approved these changes Nov 1, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

kodiakhq bot added 2 commits November 2, 2021 00:01

Merge branch 'canary' into fix/ssg-router-refresh-preview-mode

b7fb4f7

Merge branch 'canary' into fix/ssg-router-refresh-preview-mode

2d3c359

kodiakhq bot merged commit b95bc4b into vercel:canary Nov 2, 2021

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prevent storing page props cache when in SSG + preview mode #30757

Prevent storing page props cache when in SSG + preview mode #30757

kamsar commented Nov 1, 2021 •

edited

styfle left a comment

kamsar commented Nov 1, 2021

ijjk left a comment

This comment has been minimized.

ijjk commented Nov 2, 2021

Diffs

Diffs

Prevent storing page props cache when in SSG + preview mode #30757

Prevent storing page props cache when in SSG + preview mode #30757

Conversation

kamsar commented Nov 1, 2021 • edited

Bug

styfle left a comment

Choose a reason for hiding this comment

kamsar commented Nov 1, 2021

ijjk left a comment

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Nov 2, 2021

Stats from current PR

Diffs

Diffs

kamsar commented Nov 1, 2021 •

edited