fix hydration mismatch on href for url with anchor refs #21065

kaykdm · 2021-01-13T13:15:54Z

Fixes: #20624

This PR fixes hydration mismatch on <Link > with anchor refs.
Since only client side is prefixed with / when you use Link with hash like this <Link href="#hash" />, this will make sure that it is also prefixed in server side.

ijjk · 2021-01-13T13:24:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	8.9s	8.4s	-495ms
nodeModulesSize	80.9 MB	80.9 MB	⚠️ +218 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.729	1.738	⚠️ +0.01
/ avg req/sec	1445.91	1438.55	⚠️ -7.36
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.11	1.073	-0.04
/error-in-render avg req/sec	2252.24	2330.23	+77.99

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	13.1 kB	⚠️ +5 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-e66dcae..6635.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
index.html gzip	615 B	616 B	⚠️ +1 B
link.html gzip	619 B	621 B	⚠️ +2 B
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	⚠️ +3 B

Diffs

Diff for 677f882d2ed8..78884f33a.js

@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
        */
 
       function isLocalURL(url) {
-        if (url.startsWith("/")) return true;
+        // prevent a hydration mismatch on href for url with anchor refs
+        if (url.startsWith("/") || url.startsWith("#")) return true;
 
         try {
           // absolute urls can be local if they are on the same origin

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	10.6s	10.8s	⚠️ +171ms
nodeModulesSize	80.9 MB	80.9 MB	⚠️ +218 B

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-e66dcae..6635.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
677f882d2ed8..43e3.js gzip	N/A	13.1 kB	N/A
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	⚠️ +90 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +90 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +90 B
Overall change	5.18 MB	5.18 MB	⚠️ +270 B

Commit: 90273a9

timneutkens

Can you add an integration test to test/integration for this change?

ijjk · 2021-01-14T03:51:58Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	8.6s	8.6s	-32ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.698	1.705	⚠️ +0.01
/ avg req/sec	1472.75	1466.04	⚠️ -6.71
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.047	1.07	⚠️ +0.02
/error-in-render avg req/sec	2387.46	2335.85	⚠️ -51.61

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	13.1 kB	⚠️ +5 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-9d28255..78cd.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
index.html gzip	614 B	615 B	⚠️ +1 B
link.html gzip	620 B	621 B	⚠️ +1 B
withRouter.html gzip	608 B	609 B	⚠️ +1 B
Overall change	1.84 kB	1.84 kB	⚠️ +3 B

Diffs

Diff for 677f882d2ed8..78884f33a.js

@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
        */
 
       function isLocalURL(url) {
-        if (url.startsWith("/")) return true;
+        // prevent a hydration mismatch on href for url with anchor refs
+        if (url.startsWith("/") || url.startsWith("#")) return true;
 
         try {
           // absolute urls can be local if they are on the same origin

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	10.1s	10.5s	⚠️ +369ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-9d28255..78cd.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
677f882d2ed8..43e3.js gzip	N/A	13.1 kB	N/A
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	⚠️ +90 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +90 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +90 B
Overall change	5.18 MB	5.18 MB	⚠️ +270 B

Commit: fc98fde

kaykdm · 2021-01-14T04:18:41Z

Can you add an integration test to test/integration for this change?

@timneutkens
I added an integration test for this change.
Let me know if you want me to add more test case.

timneutkens · 2021-01-15T09:54:28Z

test/integration/link-with-hash/test/index.test.js

+const runTests = () => {
+  it('should not have hydration mis-match for hash link', async () => {
+    const browser = await webdriver(appPort, '/')
+    const caughtErrors = await browser.eval(`window.caughtErrors`)


You can read browser logs directly from webdriver:

browser = await webdriver(appPort, '/development-logs') const browserLogs = await browser.log('browser') let found = false browserLogs.forEach((log) => { if (log.message.includes('Next.js auto-prefetches automatically')) { found = true } })

test/integration/link-with-hash/test/index.test.js

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

timneutkens · 2021-01-15T10:15:28Z

Thanks!

ijjk · 2021-01-15T10:24:46Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	10.5s	10.8s	⚠️ +389ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.088	2.04	-0.05
/ avg req/sec	1197.26	1225.44	+28.18
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.331	1.304	-0.03
/error-in-render avg req/sec	1877.61	1917.24	+39.63

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	13.1 kB	⚠️ +5 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-b70be25..6967.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
index.html gzip	613 B	615 B	⚠️ +2 B
link.html gzip	619 B	620 B	⚠️ +1 B
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	⚠️ +3 B

Diffs

Diff for 677f882d2ed8..78884f33a.js

@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
        */
 
       function isLocalURL(url) {
-        if (url.startsWith("/")) return true;
+        // prevent a hydration mismatch on href for url with anchor refs
+        if (url.startsWith("/") || url.startsWith("#")) return true;
 
         try {
           // absolute urls can be local if they are on the same origin

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	12.8s	12.7s	-15ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-b70be25..6967.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
677f882d2ed8..43e3.js gzip	N/A	13.1 kB	N/A
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	⚠️ +90 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +90 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +90 B
Overall change	5.18 MB	5.18 MB	⚠️ +270 B

Commit: 6957e0c

timneutkens · 2021-01-15T10:32:34Z

Looks like linting is not passing 👀

ijjk · 2021-01-15T10:55:45Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	9.9s	10s	⚠️ +72ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2	1.984	-0.02
/ avg req/sec	1250.16	1260	+9.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.249	1.258	⚠️ +0.01
/error-in-render avg req/sec	2001.23	1986.78	⚠️ -14.45

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	13.1 kB	⚠️ +5 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-b70be25..6967.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
index.html gzip	613 B	615 B	⚠️ +2 B
link.html gzip	619 B	620 B	⚠️ +1 B
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	⚠️ +3 B

Diffs

Diff for 677f882d2ed8..78884f33a.js

@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
        */
 
       function isLocalURL(url) {
-        if (url.startsWith("/")) return true;
+        // prevent a hydration mismatch on href for url with anchor refs
+        if (url.startsWith("/") || url.startsWith("#")) return true;
 
         try {
           // absolute urls can be local if they are on the same origin

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	11.7s	11.5s	-211ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-b70be25..6967.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
677f882d2ed8..43e3.js gzip	N/A	13.1 kB	N/A
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	⚠️ +90 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +90 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +90 B
Overall change	5.18 MB	5.18 MB	⚠️ +270 B

Commit: 55d6c57

kaykdm · 2021-01-15T11:04:09Z

Looks like linting is not passing 👀

@timneutkens
I think this commit is causing a lint error.
Should I include the fix in this PR?

timneutkens

Yeah, thanks! 💯

ijjk · 2021-01-15T11:26:06Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	9.8s	10s	⚠️ +258ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.932	1.925	-0.01
/ avg req/sec	1293.8	1298.8	+5
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.168	1.229	⚠️ +0.06
/error-in-render avg req/sec	2140.11	2034.81	⚠️ -105.3

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	13.1 kB	⚠️ +5 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-b70be25..6967.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
index.html gzip	613 B	615 B	⚠️ +2 B
link.html gzip	619 B	620 B	⚠️ +1 B
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	⚠️ +3 B

Diffs

Diff for 677f882d2ed8..78884f33a.js

@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
        */
 
       function isLocalURL(url) {
-        if (url.startsWith("/")) return true;
+        // prevent a hydration mismatch on href for url with anchor refs
+        if (url.startsWith("/") || url.startsWith("#")) return true;
 
         try {
           // absolute urls can be local if they are on the same origin

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
buildDuration	11.4s	11.9s	⚠️ +500ms
nodeModulesSize	77.5 MB	77.5 MB	⚠️ +218 B

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

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
677f882d2ed8..b025.js gzip	13.1 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-b70be25..6967.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
677f882d2ed8..43e3.js gzip	N/A	13.1 kB	N/A
Overall change	59.4 kB	59.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	kaykdm/next.js fix/hydration-mismatch-href	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	⚠️ +90 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +90 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +90 B
Overall change	5.18 MB	5.18 MB	⚠️ +270 B

Commit: c2f27b8

ijjk · 2021-01-15T16:37:36Z

test/integration/link-with-hash/test/index.test.js

+    const browserLogs = await browser.log('browser')
+    let found = false
+    browserLogs.forEach((log) => {
+      if (log.message.includes('Warning: Prop')) {


Hi, this warning won't show in production mode so we don't need to test that, we could add this check to the client-navigation suite here using the /nav/hash-changes page to keep the test related to that. The check looks good besides that!

@ijjk (cc: @timneutkens )
Hi, thanks for the review!
You are right that this warning does not show in production.
I was not sure where to put this test, so I created new one. Adding this check to the client-navigation suite using the /nav/hash-changes makes sense to me.
Since this PR is merged, should I make an another PR to apply your suggestion?

If you'd like to create another PR updating the test that would be awesome!

In this [PR](#21065), it was suggested to move the test suite, but it was merged before fixing. This is the fix for that, moving link-with-hash test suite to client-navigation suite detail: https://github.com/vercel/next.js/pull/21065/files#r558425551

fix hydration mismatch on href for url with anchor refs

90273a9

kaykdm requested review from ijjk, lfades, Timer and timneutkens as code owners January 13, 2021 13:15

ijjk added the type: next label Jan 13, 2021

timneutkens requested changes Jan 13, 2021

View reviewed changes

add test

fc98fde

timneutkens reviewed Jan 15, 2021

View reviewed changes

read browser logs from webdriver for test

f13e7df

timneutkens reviewed Jan 15, 2021

View reviewed changes

test/integration/link-with-hash/test/index.test.js Outdated Show resolved Hide resolved

Update test/integration/link-with-hash/test/index.test.js

00c0906

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

timneutkens previously approved these changes Jan 15, 2021

View reviewed changes

Merge branch 'canary' into fix/hydration-mismatch-href

6957e0c

kaykdm dismissed timneutkens’s stale review via 55d6c57 January 15, 2021 10:46

timneutkens previously approved these changes Jan 15, 2021

View reviewed changes

fix lint

c2f27b8

kaykdm dismissed timneutkens’s stale review via c2f27b8 January 15, 2021 11:17

kaykdm force-pushed the fix/hydration-mismatch-href branch from 55d6c57 to c2f27b8 Compare January 15, 2021 11:17

ijjk reviewed Jan 15, 2021

View reviewed changes

timneutkens merged commit cdab7bf into vercel:canary Jan 15, 2021

kaykdm mentioned this pull request Jan 18, 2021

Move hydration mis-match test suite #21264

Merged

kaykdm deleted the fix/hydration-mismatch-href branch January 18, 2021 04:58

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix hydration mismatch on href for url with anchor refs #21065

fix hydration mismatch on href for url with anchor refs #21065

kaykdm commented Jan 13, 2021 •

edited

ijjk commented Jan 13, 2021

Diffs

timneutkens left a comment

ijjk commented Jan 14, 2021

Diffs

kaykdm commented Jan 14, 2021

timneutkens Jan 15, 2021

timneutkens commented Jan 15, 2021

ijjk commented Jan 15, 2021

Diffs

timneutkens commented Jan 15, 2021

ijjk commented Jan 15, 2021

Diffs

kaykdm commented Jan 15, 2021 •

edited

timneutkens left a comment

ijjk commented Jan 15, 2021

Diffs

ijjk Jan 15, 2021

kaykdm Jan 16, 2021 •

edited

ijjk Jan 18, 2021

fix hydration mismatch on href for url with anchor refs #21065

fix hydration mismatch on href for url with anchor refs #21065

Conversation

kaykdm commented Jan 13, 2021 • edited

ijjk commented Jan 13, 2021

Stats from current PR

Diffs

timneutkens left a comment

Choose a reason for hiding this comment

ijjk commented Jan 14, 2021

Stats from current PR

Diffs

kaykdm commented Jan 14, 2021

timneutkens Jan 15, 2021

Choose a reason for hiding this comment

timneutkens commented Jan 15, 2021

ijjk commented Jan 15, 2021

Stats from current PR

Diffs

timneutkens commented Jan 15, 2021

ijjk commented Jan 15, 2021

Stats from current PR

Diffs

kaykdm commented Jan 15, 2021 • edited

timneutkens left a comment

Choose a reason for hiding this comment

ijjk commented Jan 15, 2021

Stats from current PR

Diffs

ijjk Jan 15, 2021

Choose a reason for hiding this comment

kaykdm Jan 16, 2021 • edited

Choose a reason for hiding this comment

ijjk Jan 18, 2021

Choose a reason for hiding this comment

kaykdm commented Jan 13, 2021 •

edited

kaykdm commented Jan 15, 2021 •

edited

kaykdm Jan 16, 2021 •

edited