Use render after hydrate

[Timer]

Fixes #19399

[ijjk]

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
buildDuration	9.6s	9.7s	⚠️ +112ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +213 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.186	2.171	-0.02
/ avg req/sec	1143.8	1151.42	+7.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.278	1.265	-0.01
/error-in-render avg req/sec	1956.06	1976.06	+20

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

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
677f882d2ed8..8b81.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9cc22a8..b04f.js gzip	6.53 kB	6.54 kB	⚠️ +12 B
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	⚠️ +12 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
index.html gzip	615 B	614 B	-1 B
link.html gzip	622 B	622 B	✓
withRouter.html gzip	609 B	608 B	-1 B
Overall change	1.85 kB	1.84 kB	-2 B

Diffs

Diff for main-fd9cc05..e16fcf6c4.js

@@ -884,6 +884,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       }
 
       var reactRoot = null;
+      var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
       function renderReactElement(reactEl, domEl) {
         if (false) {
@@ -894,8 +895,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             performance.mark("beforeRender");
           } // The check for `.hydrate` is there to support React alternatives like preact
 
-          if (typeof _reactDom["default"].hydrate === "function") {
+          if (shouldUseHydrate) {
             _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+
+            shouldUseHydrate = false;
           } else {
             _reactDom["default"].render(reactEl, domEl, markRenderComplete);
           }

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-fd9cc05fa10e16fcf6c4.js"
+      href="/_next/static/chunks/main-87b094a9c5b46d633258.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-fd9cc05fa10e16fcf6c4.js"
+      src="/_next/static/chunks/main-87b094a9c5b46d633258.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-fd9cc05fa10e16fcf6c4.js"
+      href="/_next/static/chunks/main-87b094a9c5b46d633258.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-fd9cc05fa10e16fcf6c4.js"
+      src="/_next/static/chunks/main-87b094a9c5b46d633258.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-fd9cc05fa10e16fcf6c4.js"
+      href="/_next/static/chunks/main-87b094a9c5b46d633258.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-fd9cc05fa10e16fcf6c4.js"
+      src="/_next/static/chunks/main-87b094a9c5b46d633258.js"
       async=""
     ></script>
     <script

---

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
buildDuration	11.3s	11.4s	⚠️ +73ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +213 B

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

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
677f882d2ed8..8b81.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9cc22a8..b04f.js gzip	6.53 kB	N/A	N/A
webpack-e067..f178.js gzip	751 B	751 B	✓
main-28805a1..f51f.js gzip	N/A	6.54 kB	N/A
Overall change	59 kB	59 kB	⚠️ +12 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	Timer/next.js hotfix/hydrate-then-render	Change
_error.js	915 kB	915 kB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	915 kB	915 kB	✓
link.js	973 kB	973 kB	✓
routerDirect.js	966 kB	966 kB	✓
withRouter.js	966 kB	966 kB	✓
Overall change	4.74 MB	4.74 MB	✓

Commit: 4f98808

[styfle]

How about moving shouldUseHydrate = false before the call to hydrate()?