fix: lazy slices in static build (#1648)

Author: dai-shi

e2e/create-pages.spec.ts

@@ -347,18 +347,10 @@ test.describe(`create-pages`, () => {
     ).toBeVisible();
   });
 
-  test('slices basic', async ({ page }) => {
-    await page.goto(`http://localhost:${port}/slices`);
-    await waitForHydration(page);
-    const sliceText = await page.getByTestId('slice001').textContent();
-    expect(sliceText?.startsWith('Slice 001')).toBeTruthy();
-    const sliceText2 = await page.getByTestId('slice002').textContent();
-    expect(sliceText2?.startsWith('Slice 002')).toBeTruthy();
-  });
-
-  test('slices with static page', async ({ page }) => {
+  test('slices with render=dynamic', async ({ page }) => {
     await page.goto(`http://localhost:${port}/slices`);
     await waitForHydration(page);
+    // basic test
     const staticSliceText = await page.getByTestId('slice001').textContent();
     expect(staticSliceText?.startsWith('Slice 001')).toBeTruthy();
     const dynamicSliceText = await page.getByTestId('slice002').textContent();
@@ -368,6 +360,7 @@ test.describe(`create-pages`, () => {
     await page.waitForTimeout(1000);
     await page.getByRole('link', { name: 'Slices' }).click();
 
+    // test dynamic and static slices behavior after soft navigation
     const staticSliceText2 = await page.getByTestId('slice001').textContent();
     expect(staticSliceText2).toBe(staticSliceText);
     const dynamicSliceText2 = await page.getByTestId('slice002').textContent();
@@ -420,4 +413,16 @@ test.describe(`create-pages STATIC`, () => {
     await page.close();
     await context.close();
   });
+
+  test('slices with render=static', async ({ page }) => {
+    await page.route(/.*\/RSC\/.*/, async (route) => {
+      await new Promise((r) => setTimeout(r, 100));
+      await route.continue();
+    });
+    await page.goto(`http://localhost:${port}/static-slices`);
+    await waitForHydration(page);
+    await expect(page.getByTestId('slice001-loading')).toBeVisible();
+    const sliceText = await page.getByTestId('slice001').textContent();
+    expect(sliceText?.startsWith('Slice 001')).toBeTruthy();
+  });
 });

e2e/fixtures/create-pages/src/server-entry.tsx

@@ -326,6 +326,21 @@ const pages: ReturnType<typeof createPages> = createPages(
       ),
     }),
 
+    createPage({
+      render: 'static',
+      path: '/static-slices',
+      component: () => (
+        <>
+          <h2>Slices</h2>
+          <Slice
+            id="slice001"
+            lazy
+            fallback={<p data-testid="slice001-loading">Loading...</p>}
+          />
+        </>
+      ),
+    }),
+
     createSlice({
       render: 'static',
       component: Slice001,

e2e/fixtures/define-router/src/server-entry.tsx

@@ -66,6 +66,16 @@ const router: ReturnType<typeof defineRouter> = defineRouter({
       ],
       isStatic: true,
     },
+    {
+      type: 'slice',
+      id: 'slice001',
+      isStatic: true,
+    },
+    {
+      type: 'slice',
+      id: 'slice002',
+      isStatic: false,
+    },
   ],
   handleRoute: async (path) => {
     if (!(path in PATH_PAGE)) {
@@ -143,15 +153,6 @@ const router: ReturnType<typeof defineRouter> = defineRouter({
       status: 404,
     });
   },
-  getSliceConfig: async (sliceId) => {
-    if (sliceId === 'slice001') {
-      return { isStatic: true };
-    }
-    if (sliceId === 'slice002') {
-      return { isStatic: false };
-    }
-    return null;
-  },
   handleSlice: async (sliceId) => {
     if (sliceId === 'slice001') {
       return { element: <Slice001 /> };

packages/waku/src/router/create-pages.ts

@@ -762,11 +762,16 @@ export const createPages = <
         },
       );
 
-      return (
-        [...routeConfigs, ...apiConfigs]
-          // Sort routes by priority: "standard routes" -> api routes -> api wildcard routes -> standard wildcard routes
-          .sort((configA, configB) => routePriorityComparator(configA, configB))
-      );
+      const sliceConfigs = Array.from(sliceIdMap).map(([id, { isStatic }]) => ({
+        type: 'slice' as const,
+        id,
+        isStatic,
+      }));
+
+      const pathConfigs = [...routeConfigs, ...apiConfigs]
+        // Sort routes by priority: "standard routes" -> api routes -> api wildcard routes -> standard wildcard routes
+        .sort((configA, configB) => routePriorityComparator(configA, configB));
+      return [...pathConfigs, ...sliceConfigs];
     },
     handleRoute: async (path, { query }) => {
       await configure();
@@ -891,15 +896,6 @@ export const createPages = <
       }
       return handler(req);
     },
-    getSliceConfig: async (sliceId) => {
-      await configure();
-      const slice = sliceIdMap.get(sliceId);
-      if (!slice) {
-        throw new Error('Slice not found: ' + sliceId);
-      }
-      const { isStatic } = slice;
-      return { isStatic };
-    },
     handleSlice: async (sliceId) => {
       await configure();
       const slice = sliceIdMap.get(sliceId);