Remove hydration URL check (#9890)

.changeset/khaki-ads-buy.md

@@ -0,0 +1,14 @@
+---
+"@remix-run/react": patch
+"@remix-run/server-runtime": patch
+---
+
+Remove hydration URL check that was originally added for React 17 hydration issues and we no longer support React 17
+
+ - Reverts the logic originally added in Remix `v1.18.0` via https://github.com/remix-run/remix/pull/6409
+ - This was added to resolve an issue that could arise when doing quick back/forward history navigations while JS was loading which would cause a mismatch between the server matches and client matches: https://github.com/remix-run/remix/issues/1757
+ - This specific hydration issue would then cause this React v17 only looping issue: https://github.com/remix-run/remix/issues/1678
+ - The URL comparison that we added in `1.18.0` turned out to be subject to false positives of it's own which could also put the user in looping scenarios
+ - Remix v2 upgraded it's minimal React version to v18 which eliminated the v17 hydration error loop
+ - React v18 handles this hydration error like any other error and does not result in a loop
+ - So we can remove our check and thus avoid the false-positive scenarios in which it may also trigger a loop

packages/remix-react/browser.tsx

@@ -28,7 +28,6 @@ import {
 /* eslint-disable prefer-let/prefer-let */
 declare global {
   var __remixContext: {
-    url: string;
     basename?: string;
     state: HydrationState;
     criticalCss?: string;
@@ -197,29 +196,6 @@ if (import.meta && import.meta.hot) {
  */
 export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
   if (!router) {
-    // Hard reload if the path we tried to load is not the current path.
-    // This is usually the result of 2 rapid back/forward clicks from an
-    // external site into a Remix app, where we initially start the load for
-    // one URL and while the JS chunks are loading a second forward click moves
-    // us to a new URL.  Avoid comparing search params because of CDNs which
-    // can be configured to ignore certain params and only pathname is relevant
-    // towards determining the route matches.
-    let initialPathname = window.__remixContext.url;
-    let hydratedPathname = window.location.pathname;
-    if (
-      initialPathname !== hydratedPathname &&
-      !window.__remixContext.isSpaMode
-    ) {
-      let errorMsg =
-        `Initial URL (${initialPathname}) does not match URL at time of hydration ` +
-        `(${hydratedPathname}), reloading page...`;
-      console.error(errorMsg);
-      window.location.reload();
-      // Get out of here so the reload can happen - don't create the router
-      // since it'll then kick off unnecessary route.lazy() loads
-      return <></>;
-    }
-
     // When single fetch is enabled, we need to suspend until the initial state
     // snapshot is decoded into window.__remixContext.state
     if (window.__remixContext.future.unstable_singleFetch) {

packages/remix-server-runtime/server.ts

@@ -485,7 +485,6 @@ async function handleDocumentRequest(
     staticHandlerContext: context,
     criticalCss,
     serverHandoffString: createServerHandoffString({
-      url: context.location.pathname,
       basename: build.basename,
       criticalCss,
       future: build.future,
@@ -562,7 +561,6 @@ async function handleDocumentRequest(
       ...entryContext,
       staticHandlerContext: context,
       serverHandoffString: createServerHandoffString({
-        url: context.location.pathname,
         basename: build.basename,
         future: build.future,
         isSpaMode: build.isSpaMode,

packages/remix-server-runtime/serverHandoff.ts

@@ -20,7 +20,6 @@ export function createServerHandoffString<T>(serverHandoff: {
   // we'd end up including duplicate info
   state?: ValidateShape<T, HydrationState>;
   criticalCss?: string;
-  url: string;
   basename: string | undefined;
   future: FutureConfig;
   isSpaMode: boolean;