feat(runtime): add new configuration for reload on SSR URL mismatch (#…

…6731)
web-infra-dev · Jan 15, 2025 · f5af01d · f5af01d
1 parent 41849f6
commit f5af01d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 18 deletions.
diff --git a/.changeset/four-years-drive.md b/.changeset/four-years-drive.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/runtime': patch
+---
+
+feat: add new configuration for reload on SSR URL mismatch
+feat: 添加新的配置，支持在 SSR URL 不匹配时重新加载页面
diff --git a/packages/runtime/plugin-runtime/src/core/browser/hydrate.tsx b/packages/runtime/plugin-runtime/src/core/browser/hydrate.tsx
@@ -26,23 +26,6 @@ export function hydrateRoot(
     _hydration: true,
   };
 
-  const { ssrContext } = hydrateContext;
-
-  const currentPathname = normalizePathname(window.location.pathname);
-  const initialPathname =
-    ssrContext?.request?.pathname &&
-    normalizePathname(ssrContext.request.pathname);
-
-  if (
-    initialPathname &&
-    initialPathname !== currentPathname &&
-    context.router
-  ) {
-    const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
-    console.error(errorMsg);
-    window.location.reload();
-  }
-
   const callback = () => {
     // won't cause component re-render because context's reference identity doesn't change
     delete hydrateContext._hydration;

diff --git a/packages/runtime/plugin-runtime/src/router/runtime/plugin.tsx b/packages/runtime/plugin-runtime/src/router/runtime/plugin.tsx
@@ -1,5 +1,4 @@
 import { merge } from '@modern-js/runtime-utils/merge';
-import { parsedJSONFromElement } from '@modern-js/runtime-utils/parsed';
 import type { RouterSubscriber } from '@modern-js/runtime-utils/remix-router';
 import {
   type RouteObject,
@@ -11,6 +10,7 @@ import {
   useLocation,
   useMatches,
 } from '@modern-js/runtime-utils/router';
+import { normalizePathname } from '@modern-js/runtime-utils/url';
 import type React from 'react';
 import { useContext, useMemo } from 'react';
 import { type Plugin, RuntimeReactContext } from '../../core';
@@ -49,6 +49,22 @@ export const routerPlugin = (
       let routes: RouteObject[] = [];
       return {
         beforeRender(context) {
+          // In some scenarios, the initial pathname and the current pathname do not match.
+          // We add a configuration to support the page to reload.
+          if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
+            const { ssrContext } = context;
+            const currentPathname = normalizePathname(window.location.pathname);
+            const initialPathname =
+              ssrContext?.request?.pathname &&
+              normalizePathname(ssrContext.request.pathname);
+
+            if (initialPathname && initialPathname !== currentPathname) {
+              const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
+              console.error(errorMsg);
+              window.location.reload();
+            }
+          }
+
           // for garfish plugin to get basename,
           // why not let garfish plugin just import @modern-js/runtime/router
           // so the `router` has no type declare in RuntimeContext

diff --git a/packages/runtime/plugin-runtime/src/router/runtime/types.ts b/packages/runtime/plugin-runtime/src/router/runtime/types.ts
@@ -39,6 +39,10 @@ export type RouterConfig = {
   future?: Partial<{
     v7_startTransition: boolean;
   }>;
+  /**
+   * An unstable feature, which will reload the page when the current browser URL and the SSR Context URL do not match.
+   */
+  unstable_reloadOnURLMismatch?: boolean;
 };
 
 export type Routes = RouterConfig['routesConfig']['routes'];