@lolyjs/core 0.2.0-alpha.14 → 0.2.0-alpha.15

package/README.md

@@ -37,7 +37,7 @@ Loly is a full-stack React framework that combines the simplicity of file-based
 
 - 🔌 **Native WebSocket Support** - Built-in Socket.IO integration with automatic namespace routing
 - 🎯 **Route-Level Middlewares** - Define middlewares directly in your routes for pages and APIs
-- 📁 **Separation of Concerns** - Server logic in `server.hook.ts` separate from React components
+- 📁 **Separation of Concerns** - Server logic in `page.server.hook.ts` and `layout.server.hook.ts` separate from React components
 - 🚀 **Hybrid Rendering** - SSR, SSG, and CSR with streaming support
 - 🛡️ **Security First** - Built-in rate limiting, validation, sanitization, and security headers
 - ⚡ **Performance** - Fast bundling with Rspack and optimized code splitting
@@ -66,7 +66,7 @@ export default function Home() {
 ### Add Server-Side Data
 
 ```tsx
-// app/page/server.hook.ts
+// app/page.server.hook.ts (preferred) or app/server.hook.ts (legacy)
 import type { ServerLoader } from "@lolyjs/core";
 
 export const getServerSideProps: ServerLoader = async (ctx) => {
@@ -157,7 +157,7 @@ Define middlewares directly in your routes for fine-grained control:
 **For Pages:**
 
 ```tsx
-// app/dashboard/server.hook.ts
+// app/dashboard/page.server.hook.ts (preferred) or app/dashboard/server.hook.ts (legacy)
 import type { RouteMiddleware, ServerLoader } from "@lolyjs/core";
 
 export const beforeServerData: RouteMiddleware[] = [
@@ -233,22 +233,37 @@ Routes are automatically created from your file structure:
 
 ```tsx
 // app/layout.tsx (Root layout)
-export default function RootLayout({ children }) {
+export default function RootLayout({ children, appName, navigation }) {
   return (
     <div>
-      <nav>Navigation</nav>
+      <nav>{navigation}</nav>
       {children}
-      <footer>Footer</footer>
+      <footer>{appName}</footer>
     </div>
   );
 }
 ```
 
+```tsx
+// app/layout.server.hook.ts (Root layout server hook - same directory as layout.tsx)
+import type { ServerLoader } from "@lolyjs/core";
+
+export const getServerSideProps: ServerLoader = async (ctx) => {
+  return {
+    props: {
+      appName: "My App",
+      navigation: ["Home", "About", "Blog"],
+    },
+  };
+};
+```
+
 ```tsx
 // app/blog/layout.tsx (Nested layout)
-export default function BlogLayout({ children }) {
+export default function BlogLayout({ children, sectionTitle }) {
   return (
     <div>
+      <h1>{sectionTitle}</h1>
       <aside>Sidebar</aside>
       <main>{children}</main>
     </div>
@@ -256,6 +271,31 @@ export default function BlogLayout({ children }) {
 }
 ```
 
+```tsx
+// app/blog/layout.server.hook.ts (Nested layout server hook - same directory as layout.tsx)
+import type { ServerLoader } from "@lolyjs/core";
+
+export const getServerSideProps: ServerLoader = async (ctx) => {
+  return {
+    props: {
+      sectionTitle: "Blog Section",
+    },
+  };
+};
+```
+
+**Layout Server Hooks:**
+
+Layouts can have their own server hooks that provide stable data across all pages. Props from layout server hooks are automatically merged with page props:
+
+- **Layout props** (from `layout.server.hook.ts`) are stable and available to both the layout and all pages
+- **Page props** (from `page.server.hook.ts`) are specific to each page and override layout props if there's a conflict
+- **Combined props** are available to both layouts and pages
+
+**File Convention:**
+- Layout server hooks: `app/layout.server.hook.ts` (same directory as `layout.tsx`)
+- Page server hooks: `app/page.server.hook.ts` (preferred) or `app/server.hook.ts` (legacy, backward compatible)
+
 ### 🚀 Hybrid Rendering
 
 Choose the best rendering strategy for each page:
@@ -263,7 +303,7 @@ Choose the best rendering strategy for each page:
 **SSR (Server-Side Rendering):**
 
 ```tsx
-// app/posts/server.hook.ts
+// app/posts/page.server.hook.ts (preferred) or app/posts/server.hook.ts (legacy)
 export const dynamic = "force-dynamic" as const;
 
 export const getServerSideProps: ServerLoader = async (ctx) => {
@@ -275,7 +315,7 @@ export const getServerSideProps: ServerLoader = async (ctx) => {
 **SSG (Static Site Generation):**
 
 ```tsx
-// app/blog/[slug]/server.hook.ts
+// app/blog/[slug]/page.server.hook.ts (preferred) or app/blog/[slug]/server.hook.ts (legacy)
 export const dynamic = "force-static" as const;
 
 export const generateStaticParams: GenerateStaticParams = async () => {
@@ -292,7 +332,7 @@ export const getServerSideProps: ServerLoader = async (ctx) => {
 **CSR (Client-Side Rendering):**
 
 ```tsx
-// app/dashboard/page.tsx (No server.hook.ts)
+// app/dashboard/page.tsx (No page.server.hook.ts)
 import { useState, useEffect } from "react";
 
 export default function Dashboard() {
@@ -407,16 +447,18 @@ logger.error("Error occurred", error);
 your-app/
 ├── app/
 │   ├── layout.tsx              # Root layout
+│   ├── layout.server.hook.ts  # Root layout server hook (stable props)
 │   ├── page.tsx                # Home page (/)
-│   ├── server.hook.ts          # Server logic for home
+│   ├── page.server.hook.ts    # Page server hook (preferred) or server.hook.ts (legacy)
 │   ├── _not-found.tsx          # Custom 404
 │   ├── _error.tsx              # Custom error page
 │   ├── blog/
 │   │   ├── layout.tsx          # Blog layout
+│   │   ├── layout.server.hook.ts  # Blog layout server hook
 │   │   ├── page.tsx            # /blog
 │   │   └── [slug]/
 │   │       ├── page.tsx        # /blog/:slug
-│   │       └── server.hook.ts  # Server logic
+│   │       └── page.server.hook.ts  # Page server hook
 │   ├── api/
 │   │   └── posts/
 │   │       └── route.ts        # /api/posts
@@ -437,7 +479,10 @@ your-app/
 
 ### Server Loader
 
+**Page Server Hook:**
+
 ```tsx
+// app/page.server.hook.ts (preferred) or app/server.hook.ts (legacy)
 import type { ServerLoader } from "@lolyjs/core";
 
 export const getServerSideProps: ServerLoader = async (ctx) => {
@@ -468,6 +513,48 @@ export const getServerSideProps: ServerLoader = async (ctx) => {
 };
 ```
 
+**Layout Server Hook:**
+
+```tsx
+// app/layout.server.hook.ts (same directory as layout.tsx)
+import type { ServerLoader } from "@lolyjs/core";
+
+export const getServerSideProps: ServerLoader = async (ctx) => {
+  // Fetch stable data that persists across all pages
+  const user = await getCurrentUser();
+  const navigation = await getNavigation();
+
+  return {
+    props: {
+      user,        // Available to layout and all pages
+      navigation,  // Available to layout and all pages
+    },
+  };
+};
+```
+
+**Props Merging:**
+
+- Layout props (from `layout.server.hook.ts`) are merged first
+- Page props (from `page.server.hook.ts`) are merged second and override layout props
+- Both layouts and pages receive the combined props
+
+```tsx
+// app/layout.tsx
+export default function Layout({ user, navigation, children }) {
+  // Receives: user, navigation (from layout.server.hook.ts)
+  // Also receives: any props from page.server.hook.ts
+  return <div>{/* ... */}</div>;
+}
+
+// app/page.tsx
+export default function Page({ user, navigation, posts }) {
+  // Receives: user, navigation (from layout.server.hook.ts)
+  // Receives: posts (from page.server.hook.ts)
+  return <div>{/* ... */}</div>;
+}
+```
+
 ### API Route Handler
 
 ```tsx

package/dist/cli.cjs

@@ -169,7 +169,7 @@ function loadLayoutsForDir(pageDir, appDir) {
   };
 }
 
-// modules/router/loader.ts
+// modules/router/server-hook.ts
 var import_fs2 = __toESM(require("fs"));
 var import_path2 = __toESM(require("path"));
 var NAMING = {
@@ -181,14 +181,16 @@ var NAMING = {
   // Files
   SERVER_HOOK: "server.hook"
 };
-function loadLoaderForDir(currentDir) {
-  const loaderTs = import_path2.default.join(currentDir, `${NAMING.SERVER_HOOK}.ts`);
-  const loaderJs = import_path2.default.join(currentDir, `${NAMING.SERVER_HOOK}.js`);
-  const file = import_fs2.default.existsSync(loaderTs) ? loaderTs : import_fs2.default.existsSync(loaderJs) ? loaderJs : null;
+function loadServerHookForDir(currentDir) {
+  const pageServerHookTs = import_path2.default.join(currentDir, `page.server.hook.ts`);
+  const pageServerHookJs = import_path2.default.join(currentDir, `page.server.hook.js`);
+  const serverHookTs = import_path2.default.join(currentDir, `${NAMING.SERVER_HOOK}.ts`);
+  const serverHookJs = import_path2.default.join(currentDir, `${NAMING.SERVER_HOOK}.js`);
+  const file = import_fs2.default.existsSync(pageServerHookTs) ? pageServerHookTs : import_fs2.default.existsSync(pageServerHookJs) ? pageServerHookJs : import_fs2.default.existsSync(serverHookTs) ? serverHookTs : import_fs2.default.existsSync(serverHookJs) ? serverHookJs : null;
   if (!file) {
     return {
       middlewares: [],
-      loader: null,
+      serverHook: null,
       dynamic: "auto",
       generateStaticParams: null
     };
@@ -204,12 +206,12 @@ function loadLoaderForDir(currentDir) {
     mod = require(file);
   } catch (error) {
     console.error(
-      `[framework][loader] Error loading server hook from ${file}:`,
+      `[framework][server-hook] Error loading server hook from ${file}:`,
       error
     );
     return {
       middlewares: [],
-      loader: null,
+      serverHook: null,
       dynamic: "auto",
       generateStaticParams: null
     };
@@ -217,16 +219,43 @@ function loadLoaderForDir(currentDir) {
   const middlewares = Array.isArray(
     mod?.[NAMING.BEFORE_MIDDLEWARES]
   ) ? mod[NAMING.BEFORE_MIDDLEWARES] : [];
-  const loader = typeof mod?.[NAMING.GET_SERVER_DATA_FN] === "function" ? mod[NAMING.GET_SERVER_DATA_FN] : null;
+  const serverHook = typeof mod?.[NAMING.GET_SERVER_DATA_FN] === "function" ? mod[NAMING.GET_SERVER_DATA_FN] : null;
   const dynamic = mod?.[NAMING.RENDER_TYPE_CONST] === "force-static" || mod?.[NAMING.RENDER_TYPE_CONST] === "force-dynamic" ? mod.dynamic : "auto";
   const generateStaticParams = typeof mod?.[NAMING.GENERATE_SSG_PARAMS] === "function" ? mod[NAMING.GENERATE_SSG_PARAMS] : null;
   return {
     middlewares,
-    loader,
+    serverHook,
     dynamic,
     generateStaticParams
   };
 }
+function loadLayoutServerHook(layoutFile) {
+  const layoutDir = import_path2.default.dirname(layoutFile);
+  const layoutBasename = import_path2.default.basename(layoutFile, import_path2.default.extname(layoutFile));
+  const serverHookTs = import_path2.default.join(layoutDir, `${layoutBasename}.server.hook.ts`);
+  const serverHookJs = import_path2.default.join(layoutDir, `${layoutBasename}.server.hook.js`);
+  const file = import_fs2.default.existsSync(serverHookTs) ? serverHookTs : import_fs2.default.existsSync(serverHookJs) ? serverHookJs : null;
+  if (!file) {
+    return null;
+  }
+  if (file.endsWith(".ts") || file.endsWith(".tsx")) {
+    try {
+      require("tsx/cjs");
+    } catch (e) {
+    }
+  }
+  try {
+    const mod = require(file);
+    const serverHook = typeof mod?.getServerSideProps === "function" ? mod.getServerSideProps : null;
+    return serverHook;
+  } catch (error) {
+    console.error(
+      `[framework][server-hook] Error loading layout server hook from ${file}:`,
+      error
+    );
+    return null;
+  }
+}
 
 // modules/router/loader-pages.ts
 function loadRoutes(appDir) {
@@ -258,7 +287,12 @@ function loadRoutes(appDir) {
         currentDir,
         appDir
       );
-      const { middlewares, loader, dynamic, generateStaticParams } = loadLoaderForDir(currentDir);
+      const layoutServerHooks = [];
+      for (const layoutFile of layoutFiles) {
+        const layoutServerHook = loadLayoutServerHook(layoutFile);
+        layoutServerHooks.push(layoutServerHook);
+      }
+      const { middlewares, serverHook, dynamic, generateStaticParams } = loadServerHookForDir(currentDir);
       routes.push({
         pattern: routePath,
         regex,
@@ -268,7 +302,10 @@ function loadRoutes(appDir) {
         pageFile: fullPath,
         layoutFiles,
         middlewares,
-        loader,
+        loader: serverHook,
+        // Keep 'loader' field name for backward compatibility
+        layoutServerHooks,
+        // Server hooks for each layout (same order as layouts)
         dynamic,
         generateStaticParams
       });
@@ -787,7 +824,12 @@ function loadRoutesFromManifest(projectRoot) {
       (f) => import_path9.default.join(projectRoot, f)
     );
     const pageDir = import_path9.default.dirname(pageFile);
-    const { middlewares, loader, dynamic, generateStaticParams } = loadLoaderForDir(pageDir);
+    const layoutServerHooks = [];
+    for (const layoutFile of layoutFiles) {
+      const layoutServerHook = loadLayoutServerHook(layoutFile);
+      layoutServerHooks.push(layoutServerHook);
+    }
+    const { middlewares, serverHook, dynamic, generateStaticParams } = loadServerHookForDir(pageDir);
     pageRoutes.push({
       pattern: entry.pattern,
       regex,
@@ -797,7 +839,10 @@ function loadRoutesFromManifest(projectRoot) {
       pageFile,
       layoutFiles,
       middlewares,
-      loader,
+      loader: serverHook,
+      // Keep 'loader' field name for backward compatibility
+      layoutServerHooks,
+      // Server hooks for each layout (same order as layouts)
       dynamic: entry.dynamic ?? dynamic,
       generateStaticParams
     });
@@ -1051,7 +1096,12 @@ function loadNotFoundRouteFromFilesystem(appDir) {
     notFoundDir,
     appDir
   );
-  const { middlewares, loader, dynamic, generateStaticParams } = loadLoaderForDir(notFoundDir);
+  const layoutServerHooks = [];
+  for (const layoutFile of layoutFiles) {
+    const layoutServerHook = loadLayoutServerHook(layoutFile);
+    layoutServerHooks.push(layoutServerHook);
+  }
+  const { middlewares, serverHook, dynamic, generateStaticParams } = loadServerHookForDir(notFoundDir);
   return {
     pattern: NOT_FOUND_PATTERN,
     regex: new RegExp(`^${NOT_FOUND_PATTERN}/?$`),
@@ -1061,7 +1111,10 @@ function loadNotFoundRouteFromFilesystem(appDir) {
     pageFile: notFoundFile,
     layoutFiles,
     middlewares,
-    loader,
+    loader: serverHook,
+    // Keep 'loader' field name for backward compatibility
+    layoutServerHooks,
+    // Server hooks for each layout (same order as layouts)
     dynamic,
     generateStaticParams
   };
@@ -1092,7 +1145,12 @@ function loadErrorRouteFromFilesystem(appDir) {
     appDir,
     appDir
   );
-  const { middlewares, loader, dynamic, generateStaticParams } = loadLoaderForDir(appDir);
+  const layoutServerHooks = [];
+  for (const layoutFile of layoutFiles) {
+    const layoutServerHook = loadLayoutServerHook(layoutFile);
+    layoutServerHooks.push(layoutServerHook);
+  }
+  const { middlewares, serverHook, dynamic, generateStaticParams } = loadServerHookForDir(appDir);
   return {
     pattern: ERROR_PATTERN,
     regex: new RegExp(`^${ERROR_PATTERN}/?$`),
@@ -1102,7 +1160,10 @@ function loadErrorRouteFromFilesystem(appDir) {
     pageFile: errorFile,
     layoutFiles,
     middlewares,
-    loader,
+    loader: serverHook,
+    // Keep 'loader' field name for backward compatibility
+    layoutServerHooks,
+    // Server hooks for each layout (same order as layouts)
     dynamic,
     generateStaticParams
   };
@@ -4331,8 +4392,8 @@ async function runRouteMiddlewares(route, ctx) {
   }
 }
 
-// modules/server/handlers/loader.ts
-async function runRouteLoader(route, ctx) {
+// modules/server/handlers/server-hook.ts
+async function runRouteServerHook(route, ctx) {
   if (!route.loader) {
     return { props: {} };
   }
@@ -4489,11 +4550,39 @@ async function handlePageRequestInternal(options) {
         pathname: urlPath,
         locals: {}
       };
-      let loaderResult2 = await runRouteLoader(notFoundPage, ctx2);
+      const layoutProps2 = {};
+      if (notFoundPage.layoutServerHooks && notFoundPage.layoutServerHooks.length > 0) {
+        for (let i = 0; i < notFoundPage.layoutServerHooks.length; i++) {
+          const layoutServerHook = notFoundPage.layoutServerHooks[i];
+          if (layoutServerHook) {
+            try {
+              const layoutResult = await layoutServerHook(ctx2);
+              if (layoutResult.props) {
+                Object.assign(layoutProps2, layoutResult.props);
+              }
+            } catch (error) {
+              const reqLogger2 = getRequestLogger(req);
+              reqLogger2.warn(`Layout server hook ${i} failed for not-found`, {
+                error,
+                layoutFile: notFoundPage.layoutFiles[i]
+              });
+            }
+          }
+        }
+      }
+      let loaderResult2 = await runRouteServerHook(notFoundPage, ctx2);
       if (!loaderResult2.theme) {
         loaderResult2.theme = theme;
       }
-      const initialData2 = buildInitialData(urlPath, {}, loaderResult2);
+      const combinedProps2 = {
+        ...layoutProps2,
+        ...loaderResult2.props || {}
+      };
+      const combinedLoaderResult2 = {
+        ...loaderResult2,
+        props: combinedProps2
+      };
+      const initialData2 = buildInitialData(urlPath, {}, combinedLoaderResult2);
       const appTree2 = buildAppTree(notFoundPage, {}, initialData2.props);
       initialData2.notFound = true;
       const nonce2 = res.locals.nonce || void 0;
@@ -4501,7 +4590,7 @@ async function handlePageRequestInternal(options) {
         appTree: appTree2,
         initialData: initialData2,
         routerData,
-        meta: loaderResult2.metadata ?? null,
+        meta: combinedLoaderResult2.metadata ?? null,
         titleFallback: "Not found",
         descriptionFallback: "Loly demo",
         chunkHref: null,
@@ -4520,8 +4609,8 @@ async function handlePageRequestInternal(options) {
         },
         onShellError(err) {
           didError2 = true;
-          const reqLogger = getRequestLogger(req);
-          reqLogger.error("SSR shell error", err, { route: "not-found" });
+          const reqLogger2 = getRequestLogger(req);
+          reqLogger2.error("SSR shell error", err, { route: "not-found" });
           if (!res.headersSent && errorPage) {
             renderErrorPageWithStream(errorPage, req, res, err, routeChunks, theme, projectRoot, env);
           } else if (!res.headersSent) {
@@ -4533,8 +4622,8 @@ async function handlePageRequestInternal(options) {
         },
         onError(err) {
           didError2 = true;
-          const reqLogger = getRequestLogger(req);
-          reqLogger.error("SSR error", err, { route: "not-found" });
+          const reqLogger2 = getRequestLogger(req);
+          reqLogger2.error("SSR error", err, { route: "not-found" });
         }
       });
       req.on("close", () => abort2());
@@ -4556,9 +4645,30 @@ async function handlePageRequestInternal(options) {
   if (res.headersSent) {
     return;
   }
+  const layoutProps = {};
+  const reqLogger = getRequestLogger(req);
+  if (route.layoutServerHooks && route.layoutServerHooks.length > 0) {
+    for (let i = 0; i < route.layoutServerHooks.length; i++) {
+      const layoutServerHook = route.layoutServerHooks[i];
+      if (layoutServerHook) {
+        try {
+          const layoutResult = await layoutServerHook(ctx);
+          if (layoutResult.props) {
+            Object.assign(layoutProps, layoutResult.props);
+          }
+        } catch (error) {
+          reqLogger.warn(`Layout server hook ${i} failed`, {
+            error,
+            layoutFile: route.layoutFiles[i],
+            route: route.pattern
+          });
+        }
+      }
+    }
+  }
   let loaderResult;
   try {
-    loaderResult = await runRouteLoader(route, ctx);
+    loaderResult = await runRouteServerHook(route, ctx);
     if (!loaderResult.theme) {
       loaderResult.theme = theme;
     }
@@ -4577,8 +4687,18 @@ async function handlePageRequestInternal(options) {
       }
     }
   }
+  const combinedProps = {
+    ...layoutProps,
+    // Props from layouts (stable)
+    ...loaderResult.props || {}
+    // Props from page (overrides layout)
+  };
+  const combinedLoaderResult = {
+    ...loaderResult,
+    props: combinedProps
+  };
   if (isDataReq) {
-    handleDataResponse(res, loaderResult, theme);
+    handleDataResponse(res, combinedLoaderResult, theme);
     return;
   }
   if (loaderResult.redirect) {
@@ -4593,7 +4713,7 @@ async function handlePageRequestInternal(options) {
     }
     return;
   }
-  const initialData = buildInitialData(urlPath, params, loaderResult);
+  const initialData = buildInitialData(urlPath, params, combinedLoaderResult);
   const appTree = buildAppTree(route, params, initialData.props);
   const chunkName = routeChunks[route.pattern];
   let chunkHref = null;
@@ -4609,7 +4729,7 @@ async function handlePageRequestInternal(options) {
     appTree,
     initialData,
     routerData,
-    meta: loaderResult.metadata,
+    meta: combinedLoaderResult.metadata,
     titleFallback: "Loly framework",
     descriptionFallback: "Loly demo",
     chunkHref,
@@ -4630,8 +4750,8 @@ async function handlePageRequestInternal(options) {
     },
     onShellError(err) {
       didError = true;
-      const reqLogger = getRequestLogger(req);
-      reqLogger.error("SSR shell error", err, { route: matched?.route?.pattern || "unknown" });
+      const reqLogger2 = getRequestLogger(req);
+      reqLogger2.error("SSR shell error", err, { route: matched?.route?.pattern || "unknown" });
       if (!res.headersSent && errorPage) {
         renderErrorPageWithStream(errorPage, req, res, err, routeChunks, theme, projectRoot, env);
       } else if (!res.headersSent) {
@@ -4643,8 +4763,8 @@ async function handlePageRequestInternal(options) {
     },
     onError(err) {
       didError = true;
-      const reqLogger = getRequestLogger(req);
-      reqLogger.error("SSR error", err, { route: matched?.route?.pattern || "unknown" });
+      const reqLogger2 = getRequestLogger(req);
+      reqLogger2.error("SSR error", err, { route: matched?.route?.pattern || "unknown" });
     }
   });
   req.on("close", () => {
@@ -4661,11 +4781,39 @@ async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks
       pathname: req.path,
       locals: { error }
     };
-    let loaderResult = await runRouteLoader(errorPage, ctx);
+    const layoutProps = {};
+    const reqLogger = getRequestLogger(req);
+    if (errorPage.layoutServerHooks && errorPage.layoutServerHooks.length > 0) {
+      for (let i = 0; i < errorPage.layoutServerHooks.length; i++) {
+        const layoutServerHook = errorPage.layoutServerHooks[i];
+        if (layoutServerHook) {
+          try {
+            const layoutResult = await layoutServerHook(ctx);
+            if (layoutResult.props) {
+              Object.assign(layoutProps, layoutResult.props);
+            }
+          } catch (err) {
+            reqLogger.warn(`Layout server hook ${i} failed for error page`, {
+              error: err,
+              layoutFile: errorPage.layoutFiles[i]
+            });
+          }
+        }
+      }
+    }
+    let loaderResult = await runRouteServerHook(errorPage, ctx);
     if (!loaderResult.theme && theme) {
       loaderResult.theme = theme;
     }
-    const initialData = buildInitialData(req.path, { error: String(error) }, loaderResult);
+    const combinedProps = {
+      ...layoutProps,
+      ...loaderResult.props || {}
+    };
+    const combinedLoaderResult = {
+      ...loaderResult,
+      props: combinedProps
+    };
+    const initialData = buildInitialData(req.path, { error: String(error) }, combinedLoaderResult);
     const routerData = buildRouterData(req);
     initialData.error = true;
     if (isDataReq) {
@@ -4675,8 +4823,8 @@ async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks
         error: true,
         message: String(error),
         props: initialData.props,
-        metadata: loaderResult.metadata ?? null,
-        theme: loaderResult.theme ?? theme ?? null
+        metadata: combinedLoaderResult.metadata ?? null,
+        theme: combinedLoaderResult.theme ?? theme ?? null
       }));
       return;
     }
@@ -4698,7 +4846,7 @@ async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks
       appTree,
       initialData,
       routerData,
-      meta: loaderResult.metadata ?? null,
+      meta: combinedLoaderResult.metadata ?? null,
       titleFallback: "Error",
       descriptionFallback: "An error occurred",
       chunkHref,
@@ -4719,8 +4867,8 @@ async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks
       },
       onShellError(err) {
         didError = true;
-        const reqLogger = getRequestLogger(req);
-        reqLogger.error("Error rendering error page", err, { type: "shellError" });
+        const reqLogger2 = getRequestLogger(req);
+        reqLogger2.error("Error rendering error page", err, { type: "shellError" });
         if (!res.headersSent) {
           res.statusCode = 500;
           res.setHeader("Content-Type", "text/html; charset=utf-8");
@@ -4730,8 +4878,8 @@ async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks
       },
       onError(err) {
         didError = true;
-        const reqLogger = getRequestLogger(req);
-        reqLogger.error("Error in error page", err);
+        const reqLogger2 = getRequestLogger(req);
+        reqLogger2.error("Error in error page", err);
       }
     });
     req.on("close", () => {