feat: display text diff for text mismatch hydration errors

[huozhi]

What

Keep improving the hydration erros. Currently we divide the hydration mismatch types into two categories, html tag mismatch and text mismatch. We're displaying the mismatched text content between server and client here since we have it in the component stack and warnings.

We've already made some improvements in #62590 , here we carry on improving the highlited text into red and bold that is much easier for you to spot on.

This updated a few long snapshots that we could collapse and show only the text content difference instead of all the component stack.

Screenshots

(Dark and light modes)

Mismatch html tags

Mismatch text content

Large content mismatch

Why

I was intended to bring a html diff between server and client html content but turns out the diff result could be giant and not ideal due to few reasons. So we switched to the path of leveraging component stack and mismatch contents.
React reordering the tags after hydration. For instance the script or link tags could be hoist by React Float, so the lines of html is are to preserved. so the diff is hard to be super accurate unless your mismatch is small. If you're mismatch a component with rich html content, it could be a pretty large diff.

Another case is if you have a bad nesting html like <p> ...<span>... <p>my text</p> ...</span>... <p> where there're many span in between, the final different could also be hudge as browser will close the first <p> tag and the rest content will go into the diff. Hence we're going with the component and text content diff.

Closes NEXT-2645

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
buildDuration	13.9s	13.9s	N/A
buildDurationCached	7.5s	6.4s	N/A
nodeModulesSize	198 MB	197 MB	N/A
nextStartRea..uration (ms)	408ms	411ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
2453-HASH.js gzip	30.4 kB	30.5 kB	⚠️ +122 B
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.04 kB	5.04 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	242 B	241 B	N/A
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	75.8 kB	75.9 kB	⚠️ +122 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.2 kB	4.2 kB	✓
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	6.56 kB	6.56 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
_buildManifest.js gzip	483 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
index.html gzip	529 B	527 B	N/A
link.html gzip	542 B	540 B	N/A
withRouter.html gzip	524 B	521 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
edge-ssr.js gzip	95 kB	95.1 kB	N/A
page.js gzip	3.07 kB	3.06 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
middleware-b..fest.js gzip	624 B	624 B	✓
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	1.61 kB	1.61 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
app-page-exp...dev.js gzip	171 kB	171 kB	N/A
app-page-exp..prod.js gzip	96.7 kB	96.7 kB	N/A
app-page-tur..prod.js gzip	98.5 kB	98.5 kB	N/A
app-page-tur..prod.js gzip	92.9 kB	92.9 kB	N/A
app-page.run...dev.js gzip	150 kB	150 kB	N/A
app-page.run..prod.js gzip	91.4 kB	91.4 kB	N/A
app-route-ex...dev.js gzip	21.3 kB	21.3 kB	✓
app-route-ex..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	20.9 kB	20.9 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.51 kB	9.51 kB	✓
pages-api.ru...dev.js gzip	9.79 kB	9.79 kB	✓
pages-api.ru..prod.js gzip	9.51 kB	9.51 kB	✓
pages-turbo...prod.js gzip	22.3 kB	22.3 kB	✓
pages.runtim...dev.js gzip	23 kB	23 kB	✓
pages.runtim..prod.js gzip	22.3 kB	22.3 kB	✓
server.runti..prod.js gzip	50.6 kB	50.6 kB	N/A
Overall change	198 kB	198 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pesudo-html-diff	Change
0.pack gzip	1.56 MB	1.56 MB	N/A
index.pack gzip	105 kB	105 kB	⚠️ +557 B
Overall change	105 kB	105 kB	⚠️ +557 B

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 96c97a6

[ijjk]

🙌