Change hydration check from URL to matches #9695
Conversation
🦋 Changeset detectedLatest commit: cb8024f The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
the
awaiting release
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
github-actions
bot
removed
the
awaiting release
|
@brophdawg11 I just bumped to the latest version of Remix Run (2.11.0) and my application fails to load with a hydration error as
|
| `time of hydration , reloading page...`; | ||
| console.error(errorMsg); | ||
|
|
||
| window.location.reload(); |
There was a problem hiding this comment.
This window reload seems to be creating an infinite reload loop on Remix 2.11.0 on a server-rendered 404 page. With or without a custom ErrorBoundary. See #9821.
It seems that the issue is because hasDifferentSSRMatches is set to true because (initialMatches || []).length !== ssrMatches.length is true. initialMatches is 0, because matchRoutes doesn't match a 404 to the root route? while ssrMatches is length 1 with the root route.
I patched it like this and this seems to work:
diff --git a/node_modules/@remix-run/react/dist/esm/browser.js b/node_modules/@remix-run/react/dist/esm/browser.js
index ac5bd95..461875b 100644
--- a/node_modules/@remix-run/react/dist/esm/browser.js
+++ b/node_modules/@remix-run/react/dist/esm/browser.js
@@ -163,11 +163,12 @@ function RemixBrowser(_props) {
// us to a new URL.
let ssrMatches = window.__remixContext.ssrMatches;
let hasDifferentSSRMatches = (initialMatches || []).length !== ssrMatches.length || !(initialMatches || []).every((m, i) => ssrMatches[i] === m.route.id);
- if (hasDifferentSSRMatches && !window.__remixContext.isSpaMode) {
+ if (hasDifferentSSRMatches && !window.__remixContext.isSpaMode && !(window.__remixContext.state.errors?.root?.status === 404)) {
let ssr = ssrMatches.join(",");
let client = (initialMatches || []).map(m => m.route.id).join(",");
let errorMsg = `SSR Matches (${ssr}) do not match client matches (${client}) at ` + `time of hydration , reloading page...`;The non-esm output at node_modules/@remix-run/react/dist/browser.js also needs the same patch.
Just testing for status === 404 probably isn't a complete answer if on a 404 the server also throws a 500 or something.
This reverts commit cfc0c6f.
The original issue this check was fixing was #1757 - see about reproducing that in today's landscape - maybe the original infinite loop is no longer an issue?
Update: I'm having trouble reproducing the original issue so I'm inclined to remove this check from RR v7 entirely. But for now, switching to matches should make it less error-prone.
Closes #9692, #8872, #7529