fix(router): use route loading components during hydration (#8859)

Author: GiveMe-A-Name

.changeset/tiny-routers-hydrate.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/runtime-utils': patch
+---
+
+fix: use conventional route loading components as hydration fallbacks while initial route data is loading
+
+fix: 初始路由数据加载期间使用约定式路由的 loading 组件作为 hydration fallback

packages/toolkit/runtime-utils/src/browser/nestedRoutes.tsx

@@ -113,6 +113,10 @@ export const renderNestedRoute = (
     routeProps.element = element;
   }
 
+  if (nestedRoute.loading) {
+    routeProps.hydrateFallbackElement = <nestedRoute.loading />;
+  }
+
   const childElements = children?.map(childRoute => {
     return renderNestedRoute(childRoute, {
       parent: nestedRoute,

tests/integration/ssr/fixtures/streaming/src/routes/hydration/layout.data.ts

@@ -0,0 +1 @@
+export const loader = () => ({ title: 'Hydrated layout' });

tests/integration/ssr/fixtures/streaming/src/routes/hydration/layout.tsx

@@ -0,0 +1,12 @@
+import { Outlet, useLoaderData } from '@modern-js/runtime/router';
+import type { loader } from './layout.data';
+
+export default function Layout() {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <section id="hydration-layout">
+      {data.title}
+      <Outlet />
+    </section>
+  );
+}

tests/integration/ssr/fixtures/streaming/src/routes/hydration/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="nested-hydration-loading">Loading nested data</div>;
+}

tests/integration/ssr/fixtures/streaming/src/routes/hydration/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div id="hydration-page">Hydrated page</div>;
+}

tests/integration/ssr/fixtures/streaming/src/routes/layout.data.ts

@@ -0,0 +1 @@
+export const loader = () => ({ title: 'Root layout' });

tests/integration/ssr/fixtures/streaming/src/routes/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="root-hydration-loading">Loading root data</div>;
+}

tests/integration/ssr/tests/streaming.test.ts

@@ -177,4 +177,82 @@ describe('Streaming SSR', () => {
   test('should render fallback before final content', async () => {
     await streamingOrderOnServer(appPort);
   });
+
+  test.each([
+    ['layout', '#root-hydration-loading'],
+    ['hydration/layout', '#nested-hydration-loading'],
+  ])('renders loading while hydrating %s', async (routeId, selector) => {
+    const hydrationPage = await browser.newPage();
+    const warnings: string[] = [];
+    hydrationPage.on('console', message => {
+      if (message.text().includes('No `HydrateFallback`')) {
+        warnings.push(message.text());
+      }
+    });
+
+    try {
+      // Simulate incomplete SSR data before the client creates its router.
+      await hydrationPage.evaluateOnNewDocument(id => {
+        let routerData: { loaderData: Record<string, unknown> };
+        Object.defineProperty(window, '_ROUTER_DATA', {
+          configurable: true,
+          get: () => routerData,
+          set: value => {
+            routerData = value;
+            delete routerData.loaderData[id];
+          },
+        });
+      }, routeId);
+
+      // Hold the client loader request until the fallback has been observed.
+      await hydrationPage.setRequestInterception(true);
+      hydrationPage.on('request', request => {
+        if (new URL(request.url()).searchParams.get('__loader') !== routeId) {
+          void request.continue();
+        }
+      });
+      const loaderRequest = hydrationPage.waitForRequest(
+        request =>
+          new URL(request.url()).searchParams.get('__loader') === routeId,
+      );
+      await hydrationPage.goto(`http://localhost:${appPort}/hydration`, {
+        waitUntil: 'domcontentloaded',
+      });
+      const request = await loaderRequest;
+      await hydrationPage.waitForSelector(selector, { visible: true });
+      expect(await hydrationPage.$('#hydration-page')).toBeNull();
+      if (routeId === 'hydration/layout') {
+        await expectPageToMatchTextContent(hydrationPage, 'Root layout');
+      }
+
+      await request.continue();
+      await hydrationPage.waitForSelector('#hydration-page', { visible: true });
+      await expectPageToMatchTextContent(hydrationPage, 'Hydrated layout');
+      expect(await hydrationPage.$(selector)).toBeNull();
+      expect(warnings).toEqual([]);
+    } finally {
+      await hydrationPage.close();
+    }
+  });
+
+  test('reuses complete hydration data without rerunning loaders', async () => {
+    const hydrationPage = await browser.newPage();
+    const loaderRequests: string[] = [];
+    hydrationPage.on('request', request => {
+      if (new URL(request.url()).searchParams.has('__loader')) {
+        loaderRequests.push(request.url());
+      }
+    });
+    try {
+      await hydrationPage.goto(`http://localhost:${appPort}/hydration`, {
+        waitUntil: 'networkidle0',
+      });
+      await hydrationPage.waitForSelector('#hydration-page', { visible: true });
+      expect(await hydrationPage.$('#root-hydration-loading')).toBeNull();
+      expect(await hydrationPage.$('#nested-hydration-loading')).toBeNull();
+      expect(loaderRequests).toEqual([]);
+    } finally {
+      await hydrationPage.close();
+    }
+  });
 });