@nestjs-ssr/react 0.3.3 → 0.3.4

package/dist/cli/init.js

@@ -39,7 +39,7 @@ var main = citty.defineCommand({
       default: "5173"
     }
   },
-  async run({ args }) {
+  run({ args }) {
     const cwd = process.cwd();
     const viewsDir = args.views;
     const vitePort = parseInt(args.port, 10) || 5173;
@@ -419,17 +419,17 @@ export default defineConfig({
         packageJson.scripts["start:dev"] = 'concurrently --raw -n vite,nest -c cyan,green "pnpm:dev:vite" "pnpm:dev:nest"';
         shouldUpdate = true;
       }
-      const existingBuild = packageJson.scripts.build;
+      const existingBuild = packageJson.scripts["build"];
       const recommendedBuild = "nest build && pnpm build:client && pnpm build:server";
       if (!existingBuild) {
-        packageJson.scripts.build = recommendedBuild;
+        packageJson.scripts["build"] = recommendedBuild;
         shouldUpdate = true;
         consola.consola.success("Created build script");
       } else if (existingBuild !== recommendedBuild) {
         if (!existingBuild.includes("build:client") || !existingBuild.includes("build:server")) {
           consola.consola.warn(`Found existing build script: "${existingBuild}"`);
           consola.consola.info(`Updating to: ${recommendedBuild}`);
-          packageJson.scripts.build = recommendedBuild;
+          packageJson.scripts["build"] = recommendedBuild;
           shouldUpdate = true;
         } else {
           consola.consola.info("Build scripts already configured");
@@ -528,4 +528,4 @@ export default defineConfig({
     consola.consola.log("   Terminal 2: pnpm dev:nest");
   }
 });
-citty.runMain(main);
+void citty.runMain(main);

package/dist/cli/init.mjs

@@ -36,7 +36,7 @@ var main = defineCommand({
       default: "5173"
     }
   },
-  async run({ args }) {
+  run({ args }) {
     const cwd = process.cwd();
     const viewsDir = args.views;
     const vitePort = parseInt(args.port, 10) || 5173;
@@ -416,17 +416,17 @@ export default defineConfig({
         packageJson.scripts["start:dev"] = 'concurrently --raw -n vite,nest -c cyan,green "pnpm:dev:vite" "pnpm:dev:nest"';
         shouldUpdate = true;
       }
-      const existingBuild = packageJson.scripts.build;
+      const existingBuild = packageJson.scripts["build"];
       const recommendedBuild = "nest build && pnpm build:client && pnpm build:server";
       if (!existingBuild) {
-        packageJson.scripts.build = recommendedBuild;
+        packageJson.scripts["build"] = recommendedBuild;
         shouldUpdate = true;
         consola.success("Created build script");
       } else if (existingBuild !== recommendedBuild) {
         if (!existingBuild.includes("build:client") || !existingBuild.includes("build:server")) {
           consola.warn(`Found existing build script: "${existingBuild}"`);
           consola.info(`Updating to: ${recommendedBuild}`);
-          packageJson.scripts.build = recommendedBuild;
+          packageJson.scripts["build"] = recommendedBuild;
           shouldUpdate = true;
         } else {
           consola.info("Build scripts already configured");
@@ -525,4 +525,4 @@ export default defineConfig({
     consola.log("   Terminal 2: pnpm dev:nest");
   }
 });
-runMain(main);
+void runMain(main);

package/dist/index.js

@@ -7,13 +7,13 @@ var path = require('path');
 var devalue = require('devalue');
 var escapeHtml = require('escape-html');
 var server = require('react-dom/server');
-var React = require('react');
+var React2 = require('react');
 var operators = require('rxjs/operators');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var escapeHtml__default = /*#__PURE__*/_interopDefault(escapeHtml);
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -339,16 +339,18 @@ StringRenderer = _ts_decorate2([
     typeof exports.TemplateParserService === "undefined" ? Object : exports.TemplateParserService
   ])
 ], StringRenderer);
+
+// src/render/error-pages/error-page-development.tsx
 function ErrorPageDevelopment({ error, viewPath, phase }) {
   const stackLines = error.stack ? error.stack.split("\n").slice(1) : [];
-  return /* @__PURE__ */ React__default.default.createElement("html", {
+  return /* @__PURE__ */ React.createElement("html", {
     lang: "en"
-  }, /* @__PURE__ */ React__default.default.createElement("head", null, /* @__PURE__ */ React__default.default.createElement("meta", {
+  }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", {
     charSet: "UTF-8"
-  }), /* @__PURE__ */ React__default.default.createElement("meta", {
+  }), /* @__PURE__ */ React.createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=1.0"
-  }), /* @__PURE__ */ React__default.default.createElement("title", null, `SSR Error - ${error.name}`), /* @__PURE__ */ React__default.default.createElement("style", {
+  }), /* @__PURE__ */ React.createElement("title", null, `SSR Error - ${error.name}`), /* @__PURE__ */ React.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `
               body {
@@ -399,28 +401,30 @@ function ErrorPageDevelopment({ error, viewPath, phase }) {
               }
             `
     }
-  })), /* @__PURE__ */ React__default.default.createElement("body", null, /* @__PURE__ */ React__default.default.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement("div", {
     className: "error-container"
-  }, /* @__PURE__ */ React__default.default.createElement("h1", null, "Server-Side Rendering Error"), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("h1", null, "Server-Side Rendering Error"), /* @__PURE__ */ React.createElement("div", {
     className: "error-type"
-  }, error.name), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, error.name), /* @__PURE__ */ React.createElement("div", {
     className: "error-message"
-  }, error.message), /* @__PURE__ */ React__default.default.createElement("h2", null, "Stack Trace"), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, error.message), /* @__PURE__ */ React.createElement("h2", null, "Stack Trace"), /* @__PURE__ */ React.createElement("div", {
     className: "stack-trace"
-  }, /* @__PURE__ */ React__default.default.createElement("pre", null, stackLines.join("\n"))), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("pre", null, stackLines.join("\n"))), /* @__PURE__ */ React.createElement("div", {
     className: "meta"
-  }, /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "View Path:"), " ", viewPath), /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "Error Phase:"), " ", phase === "shell" ? "Shell (before streaming started)" : "Streaming (during content delivery)"), /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "Environment:"), " Development")))));
+  }, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "View Path:"), " ", viewPath), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Error Phase:"), " ", phase === "shell" ? "Shell (before streaming started)" : "Streaming (during content delivery)"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Environment:"), " Development")))));
 }
 __name(ErrorPageDevelopment, "ErrorPageDevelopment");
+
+// src/render/error-pages/error-page-production.tsx
 function ErrorPageProduction() {
-  return /* @__PURE__ */ React__default.default.createElement("html", {
+  return /* @__PURE__ */ React.createElement("html", {
     lang: "en"
-  }, /* @__PURE__ */ React__default.default.createElement("head", null, /* @__PURE__ */ React__default.default.createElement("meta", {
+  }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", {
     charSet: "UTF-8"
-  }), /* @__PURE__ */ React__default.default.createElement("meta", {
+  }), /* @__PURE__ */ React.createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=1.0"
-  }), /* @__PURE__ */ React__default.default.createElement("title", null, "Error"), /* @__PURE__ */ React__default.default.createElement("style", {
+  }), /* @__PURE__ */ React.createElement("title", null, "Error"), /* @__PURE__ */ React.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `
               body {
@@ -447,9 +451,9 @@ function ErrorPageProduction() {
               }
             `
     }
-  })), /* @__PURE__ */ React__default.default.createElement("body", null, /* @__PURE__ */ React__default.default.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement("div", {
     className: "error-container"
-  }, /* @__PURE__ */ React__default.default.createElement("h1", null, "500"), /* @__PURE__ */ React__default.default.createElement("p", null, "Internal Server Error"), /* @__PURE__ */ React__default.default.createElement("p", null, "Something went wrong while rendering this page."))));
+  }, /* @__PURE__ */ React.createElement("h1", null, "500"), /* @__PURE__ */ React.createElement("p", null, "Internal Server Error"), /* @__PURE__ */ React.createElement("p", null, "Something went wrong while rendering this page."))));
 }
 __name(ErrorPageProduction, "ErrorPageProduction");
 
@@ -516,7 +520,7 @@ exports.StreamingErrorHandler = class _StreamingErrorHandler {
   */
   renderDevelopmentErrorPage(error, viewPath, phase) {
     const ErrorComponent = this.errorPageDevelopment || ErrorPageDevelopment;
-    const element = React.createElement(ErrorComponent, {
+    const element = React2.createElement(ErrorComponent, {
       error,
       viewPath,
       phase
@@ -528,7 +532,7 @@ exports.StreamingErrorHandler = class _StreamingErrorHandler {
   */
   renderProductionErrorPage() {
     const ErrorComponent = this.errorPageProduction || ErrorPageProduction;
-    const element = React.createElement(ErrorComponent);
+    const element = React2.createElement(ErrorComponent);
     return "<!DOCTYPE html>\n" + server.renderToStaticMarkup(element);
   }
   /**
@@ -1703,7 +1707,7 @@ var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("nestjs-ssr.PageContext");
 var globalStore = globalThis;
 function getOrCreateContext() {
   if (!globalStore[CONTEXT_KEY]) {
-    globalStore[CONTEXT_KEY] = /* @__PURE__ */ React.createContext(null);
+    globalStore[CONTEXT_KEY] = /* @__PURE__ */ React2.createContext(null);
   }
   return globalStore[CONTEXT_KEY];
 }
@@ -1713,12 +1717,12 @@ function registerPageContextState(setter) {
 }
 __name(registerPageContextState, "registerPageContextState");
 function PageContextProvider({ context: initialContext, children, isSegment = false }) {
-  const [context, setContext] = React.useState(initialContext);
-  React.useEffect(() => {
+  const [context, setContext] = React2.useState(initialContext);
+  React2.useEffect(() => {
   }, [
     isSegment
   ]);
-  return /* @__PURE__ */ React__default.default.createElement(PageContext.Provider, {
+  return /* @__PURE__ */ React2__default.default.createElement(PageContext.Provider, {
     value: context
   }, children);
 }
@@ -1730,7 +1734,7 @@ function createSSRHooks() {
     * Contains URL metadata, headers, and any custom properties you've added.
     */
     usePageContext: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("usePageContext must be used within PageContextProvider");
       }
@@ -1747,7 +1751,7 @@ function createSSRHooks() {
     * ```
     */
     useParams: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useParams must be used within PageContextProvider");
       }
@@ -1765,7 +1769,7 @@ function createSSRHooks() {
     * ```
     */
     useQuery: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useQuery must be used within PageContextProvider");
       }
@@ -1785,7 +1789,7 @@ function createSSRHooks() {
     * ```
     */
     useRequest: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useRequest must be used within PageContextProvider");
       }
@@ -1811,7 +1815,7 @@ function createSSRHooks() {
     * ```
     */
     useHeaders: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useHeaders must be used within PageContextProvider");
       }
@@ -1846,7 +1850,7 @@ function createSSRHooks() {
     * ```
     */
     useHeader: /* @__PURE__ */ __name((name) => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useHeader must be used within PageContextProvider");
       }
@@ -1872,7 +1876,7 @@ function createSSRHooks() {
     * ```
     */
     useCookies: /* @__PURE__ */ __name(() => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useCookies must be used within PageContextProvider");
       }
@@ -1894,7 +1898,7 @@ function createSSRHooks() {
     * ```
     */
     useCookie: /* @__PURE__ */ __name((name) => {
-      const context = React.useContext(PageContext);
+      const context = React2.useContext(PageContext);
       if (!context) {
         throw new Error("useCookie must be used within PageContextProvider");
       }

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { join, relative } from 'path';
 import { uneval } from 'devalue';
 import escapeHtml from 'escape-html';
 import { renderToStaticMarkup } from 'react-dom/server';
-import React, { createElement, createContext, useContext, useState, useEffect } from 'react';
+import React2, { createElement, createContext, useContext, useState, useEffect } from 'react';
 import { switchMap } from 'rxjs/operators';
 
 var __defProp = Object.defineProperty;
@@ -332,6 +332,8 @@ StringRenderer = _ts_decorate2([
     typeof TemplateParserService === "undefined" ? Object : TemplateParserService
   ])
 ], StringRenderer);
+
+// src/render/error-pages/error-page-development.tsx
 function ErrorPageDevelopment({ error, viewPath, phase }) {
   const stackLines = error.stack ? error.stack.split("\n").slice(1) : [];
   return /* @__PURE__ */ React.createElement("html", {
@@ -405,6 +407,8 @@ function ErrorPageDevelopment({ error, viewPath, phase }) {
   }, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "View Path:"), " ", viewPath), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Error Phase:"), " ", phase === "shell" ? "Shell (before streaming started)" : "Streaming (during content delivery)"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Environment:"), " Development")))));
 }
 __name(ErrorPageDevelopment, "ErrorPageDevelopment");
+
+// src/render/error-pages/error-page-production.tsx
 function ErrorPageProduction() {
   return /* @__PURE__ */ React.createElement("html", {
     lang: "en"
@@ -1711,7 +1715,7 @@ function PageContextProvider({ context: initialContext, children, isSegment = fa
   }, [
     isSegment
   ]);
-  return /* @__PURE__ */ React.createElement(PageContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(PageContext.Provider, {
     value: context
   }, children);
 }

package/dist/render/index.js

@@ -7,13 +7,12 @@ var path = require('path');
 var devalue = require('devalue');
 var escapeHtml = require('escape-html');
 var server = require('react-dom/server');
-var React = require('react');
+var react = require('react');
 var operators = require('rxjs/operators');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var escapeHtml__default = /*#__PURE__*/_interopDefault(escapeHtml);
-var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -339,16 +338,18 @@ StringRenderer = _ts_decorate2([
     typeof exports.TemplateParserService === "undefined" ? Object : exports.TemplateParserService
   ])
 ], StringRenderer);
+
+// src/render/error-pages/error-page-development.tsx
 function ErrorPageDevelopment({ error, viewPath, phase }) {
   const stackLines = error.stack ? error.stack.split("\n").slice(1) : [];
-  return /* @__PURE__ */ React__default.default.createElement("html", {
+  return /* @__PURE__ */ React.createElement("html", {
     lang: "en"
-  }, /* @__PURE__ */ React__default.default.createElement("head", null, /* @__PURE__ */ React__default.default.createElement("meta", {
+  }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", {
     charSet: "UTF-8"
-  }), /* @__PURE__ */ React__default.default.createElement("meta", {
+  }), /* @__PURE__ */ React.createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=1.0"
-  }), /* @__PURE__ */ React__default.default.createElement("title", null, `SSR Error - ${error.name}`), /* @__PURE__ */ React__default.default.createElement("style", {
+  }), /* @__PURE__ */ React.createElement("title", null, `SSR Error - ${error.name}`), /* @__PURE__ */ React.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `
               body {
@@ -399,28 +400,30 @@ function ErrorPageDevelopment({ error, viewPath, phase }) {
               }
             `
     }
-  })), /* @__PURE__ */ React__default.default.createElement("body", null, /* @__PURE__ */ React__default.default.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement("div", {
     className: "error-container"
-  }, /* @__PURE__ */ React__default.default.createElement("h1", null, "Server-Side Rendering Error"), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("h1", null, "Server-Side Rendering Error"), /* @__PURE__ */ React.createElement("div", {
     className: "error-type"
-  }, error.name), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, error.name), /* @__PURE__ */ React.createElement("div", {
     className: "error-message"
-  }, error.message), /* @__PURE__ */ React__default.default.createElement("h2", null, "Stack Trace"), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, error.message), /* @__PURE__ */ React.createElement("h2", null, "Stack Trace"), /* @__PURE__ */ React.createElement("div", {
     className: "stack-trace"
-  }, /* @__PURE__ */ React__default.default.createElement("pre", null, stackLines.join("\n"))), /* @__PURE__ */ React__default.default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("pre", null, stackLines.join("\n"))), /* @__PURE__ */ React.createElement("div", {
     className: "meta"
-  }, /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "View Path:"), " ", viewPath), /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "Error Phase:"), " ", phase === "shell" ? "Shell (before streaming started)" : "Streaming (during content delivery)"), /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "Environment:"), " Development")))));
+  }, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "View Path:"), " ", viewPath), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Error Phase:"), " ", phase === "shell" ? "Shell (before streaming started)" : "Streaming (during content delivery)"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Environment:"), " Development")))));
 }
 __name(ErrorPageDevelopment, "ErrorPageDevelopment");
+
+// src/render/error-pages/error-page-production.tsx
 function ErrorPageProduction() {
-  return /* @__PURE__ */ React__default.default.createElement("html", {
+  return /* @__PURE__ */ React.createElement("html", {
     lang: "en"
-  }, /* @__PURE__ */ React__default.default.createElement("head", null, /* @__PURE__ */ React__default.default.createElement("meta", {
+  }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", {
     charSet: "UTF-8"
-  }), /* @__PURE__ */ React__default.default.createElement("meta", {
+  }), /* @__PURE__ */ React.createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=1.0"
-  }), /* @__PURE__ */ React__default.default.createElement("title", null, "Error"), /* @__PURE__ */ React__default.default.createElement("style", {
+  }), /* @__PURE__ */ React.createElement("title", null, "Error"), /* @__PURE__ */ React.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `
               body {
@@ -447,9 +450,9 @@ function ErrorPageProduction() {
               }
             `
     }
-  })), /* @__PURE__ */ React__default.default.createElement("body", null, /* @__PURE__ */ React__default.default.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement("div", {
     className: "error-container"
-  }, /* @__PURE__ */ React__default.default.createElement("h1", null, "500"), /* @__PURE__ */ React__default.default.createElement("p", null, "Internal Server Error"), /* @__PURE__ */ React__default.default.createElement("p", null, "Something went wrong while rendering this page."))));
+  }, /* @__PURE__ */ React.createElement("h1", null, "500"), /* @__PURE__ */ React.createElement("p", null, "Internal Server Error"), /* @__PURE__ */ React.createElement("p", null, "Something went wrong while rendering this page."))));
 }
 __name(ErrorPageProduction, "ErrorPageProduction");
 
@@ -516,7 +519,7 @@ exports.StreamingErrorHandler = class _StreamingErrorHandler {
   */
   renderDevelopmentErrorPage(error, viewPath, phase) {
     const ErrorComponent = this.errorPageDevelopment || ErrorPageDevelopment;
-    const element = React.createElement(ErrorComponent, {
+    const element = react.createElement(ErrorComponent, {
       error,
       viewPath,
       phase
@@ -528,7 +531,7 @@ exports.StreamingErrorHandler = class _StreamingErrorHandler {
   */
   renderProductionErrorPage() {
     const ErrorComponent = this.errorPageProduction || ErrorPageProduction;
-    const element = React.createElement(ErrorComponent);
+    const element = react.createElement(ErrorComponent);
     return "<!DOCTYPE html>\n" + server.renderToStaticMarkup(element);
   }
   /**

package/dist/render/index.mjs

@@ -5,7 +5,7 @@ import { join, relative } from 'path';
 import { uneval } from 'devalue';
 import escapeHtml from 'escape-html';
 import { renderToStaticMarkup } from 'react-dom/server';
-import React, { createElement } from 'react';
+import { createElement } from 'react';
 import { switchMap } from 'rxjs/operators';
 
 var __defProp = Object.defineProperty;
@@ -332,6 +332,8 @@ StringRenderer = _ts_decorate2([
     typeof TemplateParserService === "undefined" ? Object : TemplateParserService
   ])
 ], StringRenderer);
+
+// src/render/error-pages/error-page-development.tsx
 function ErrorPageDevelopment({ error, viewPath, phase }) {
   const stackLines = error.stack ? error.stack.split("\n").slice(1) : [];
   return /* @__PURE__ */ React.createElement("html", {
@@ -405,6 +407,8 @@ function ErrorPageDevelopment({ error, viewPath, phase }) {
   }, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "View Path:"), " ", viewPath), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Error Phase:"), " ", phase === "shell" ? "Shell (before streaming started)" : "Streaming (during content delivery)"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Environment:"), " Development")))));
 }
 __name(ErrorPageDevelopment, "ErrorPageDevelopment");
+
+// src/render/error-pages/error-page-production.tsx
 function ErrorPageProduction() {
   return /* @__PURE__ */ React.createElement("html", {
     lang: "en"

package/dist/templates/entry-client.tsx

@@ -1,4 +1,5 @@
 /// <reference types="@nestjs-ssr/react/global" />
+
 import React, { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import {
@@ -10,6 +11,15 @@ const componentName = window.__COMPONENT_NAME__;
 const initialProps = window.__INITIAL_STATE__ || {};
 const renderContext = window.__CONTEXT__ || {};
 
+// Auto-discover root layout using Vite's glob import (must match server-side discovery)
+// @ts-ignore - Vite-specific API
+const layoutModules = import.meta.glob('@/views/layout.tsx', {
+  eager: true,
+}) as Record<string, { default: React.ComponentType<any> }>;
+
+const layoutPath = Object.keys(layoutModules)[0];
+const RootLayout = layoutPath ? layoutModules[layoutPath].default : null;
+
 // Auto-import all view components using Vite's glob feature
 // Exclude entry-client.tsx and entry-server.tsx from the glob
 // @ts-ignore - Vite-specific API
@@ -111,40 +121,53 @@ function hasLayout(
 function composeWithLayout(
   ViewComponent: React.ComponentType<any>,
   props: any,
+  context?: any,
+  layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [],
 ): React.ReactElement {
-  const element = <ViewComponent {...props} />;
-
-  // Check if component has a layout
-  if (!hasLayout(ViewComponent)) {
-    return element;
-  }
-
-  // Collect all layouts in the chain (innermost to outermost)
-  const layoutChain: Array<{
-    Layout: React.ComponentType<any>;
-    layoutProps: any;
-  }> = [];
-  let currentComponent: any = ViewComponent;
-
-  while (hasLayout(currentComponent)) {
-    layoutChain.push({
-      Layout: currentComponent.layout,
-      layoutProps: currentComponent.layoutProps || {},
-    });
-    currentComponent = currentComponent.layout;
+  // Start with the page component
+  let result = <ViewComponent {...props} />;
+
+  // If no layouts passed, check if component has its own layout chain
+  if (layouts.length === 0 && hasLayout(ViewComponent)) {
+    let currentComponent: any = ViewComponent;
+    while (hasLayout(currentComponent)) {
+      layouts.push({
+        layout: currentComponent.layout,
+        props: currentComponent.layoutProps || {},
+      });
+      currentComponent = currentComponent.layout;
+    }
   }
 
-  // Wrap the element with layouts from innermost to outermost
-  let result = element;
-  for (const { Layout, layoutProps } of layoutChain) {
-    result = <Layout layoutProps={layoutProps}>{result}</Layout>;
+  // Wrap with each layout in the chain
+  // Must match server-side wrapping with data-layout and data-outlet attributes
+  for (const { layout: Layout, props: layoutProps } of layouts) {
+    const layoutName = Layout.displayName || Layout.name || 'Layout';
+    result = (
+      <div data-layout={layoutName}>
+        <Layout context={context} layoutProps={layoutProps}>
+          <div data-outlet={layoutName}>{result}</div>
+        </Layout>
+      </div>
+    );
   }
 
   return result;
 }
 
+// Build layouts array - use RootLayout if it exists (matching server behavior)
+const layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [];
+if (RootLayout) {
+  layouts.push({ layout: RootLayout, props: {} });
+}
+
 // Compose the component with its layout (if any)
-const composedElement = composeWithLayout(ViewComponent, initialProps);
+const composedElement = composeWithLayout(
+  ViewComponent,
+  initialProps,
+  renderContext,
+  layouts,
+);
 
 // Wrap with providers to make context and navigation state available via hooks
 const wrappedElement = (

package/etc/react.api.md

@@ -1,262 +1,250 @@
-## API Report File for "@nestjs-ssr/react"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-import { CallHandler } from '@nestjs/common';
-import { ComponentType } from 'react';
-import { DynamicModule } from '@nestjs/common';
-import { ExecutionContext } from '@nestjs/common';
-import { NestInterceptor } from '@nestjs/common';
-import { Observable } from 'rxjs';
-import { default as React_2 } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { Reflector } from '@nestjs/core';
-import { Response as Response_2 } from 'express';
-import { ViteDevServer } from 'vite';
-
-// Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps" needs to be exported by the entry point index.d.ts
-//
-// @public
-export function ErrorPageDevelopment({
-  error,
-  viewPath,
-  phase,
-}: ErrorPageDevelopmentProps): react_jsx_runtime.JSX.Element;
-
-// @public
-export function ErrorPageProduction(): react_jsx_runtime.JSX.Element;
-
-// @public
-export interface HeadData {
-  bodyAttributes?: Record<string, string>;
-  canonical?: string;
-  description?: string;
-  htmlAttributes?: Record<string, string>;
-  jsonLd?: Array<Record<string, any>>;
-  keywords?: string;
-  links?: Array<{
-    rel: string;
-    href: string;
-    as?: string;
-    type?: string;
-    crossorigin?: string;
-    [key: string]: any;
-  }>;
-  meta?: Array<{
-    name?: string;
-    property?: string;
-    content: string;
-    [key: string]: any;
-  }>;
-  ogDescription?: string;
-  ogImage?: string;
-  ogTitle?: string;
-  scripts?: Array<{
-    src?: string;
-    async?: boolean;
-    defer?: boolean;
-    type?: string;
-    innerHTML?: string;
-    [key: string]: any;
-  }>;
-  title?: string;
-}
-
-// @public
-export function Layout(
-  layout: LayoutComponent<any>,
-  options?: LayoutDecoratorOptions,
-): ClassDecorator;
-
-// @public
-export type LayoutComponent<TProps = {}> = ComponentType<LayoutProps<TProps>>;
-
-// @public
-export interface LayoutDecoratorOptions {
-  props?: Record<string, any>;
-  skipRoot?: boolean;
-}
-
-// @public
-export interface LayoutProps<TProps = {}> {
-  children: ReactNode;
-  context?: RenderContext;
-  head?: HeadData;
-  layoutProps?: TProps;
-}
-
-// @public
-export interface PageComponentWithLayout<TPageProps = {}, TLayoutProps = {}> {
-  (props: TPageProps): ReactNode;
-  layout?: LayoutComponent<TLayoutProps>;
-  layoutProps?: TLayoutProps;
-}
-
-// @public
-export type PageProps<TProps = {}> = TProps & {
-  head?: HeadData;
-  context: RenderContext;
-};
-
-// Warning: (ae-forgotten-export) The symbol "RenderReturnType" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "ExtractComponentData" needs to be exported by the entry point index.d.ts
-//
-// @public
-export function Render<T extends React_2.ComponentType<any>>(
-  component: T,
-  options?: RenderOptions,
-): <
-  TMethod extends (
-    ...args: any[]
-  ) =>
-    | RenderReturnType<ExtractComponentData<T>>
-    | Promise<RenderReturnType<ExtractComponentData<T>>>,
->(
-  target: any,
-  propertyKey: string | symbol,
-  descriptor: TypedPropertyDescriptor<TMethod>,
-) => TypedPropertyDescriptor<TMethod> | void;
-
-// @public
-export interface RenderConfig {
-  defaultHead?: HeadData;
-  // Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps$1" needs to be exported by the entry point index.d.ts
-  errorPageDevelopment?: ComponentType<ErrorPageDevelopmentProps$1>;
-  errorPageProduction?: ComponentType;
-  mode?: SSRMode;
-  template?: string;
-  timeout?: number;
-  // Warning: (ae-forgotten-export) The symbol "ViteConfig" needs to be exported by the entry point index.d.ts
-  vite?: ViteConfig;
-}
-
-// @public
-export interface RenderContext {
-  // (undocumented)
-  [key: string]: any;
-  // (undocumented)
-  acceptLanguage?: string;
-  // (undocumented)
-  cookies?: Record<string, string>;
-  // (undocumented)
-  headers?: Record<string, string>;
-  // (undocumented)
-  method: string;
-  // (undocumented)
-  params: Record<string, string>;
-  // (undocumented)
-  path: string;
-  // (undocumented)
-  query: Record<string, string | string[]>;
-  // (undocumented)
-  referer?: string;
-  // (undocumented)
-  url: string;
-  // (undocumented)
-  userAgent?: string;
-}
-
-// @public (undocumented)
-export class RenderInterceptor implements NestInterceptor {
-  constructor(reflector: Reflector, renderService: RenderService);
-  // (undocumented)
-  intercept(context: ExecutionContext, next: CallHandler): Observable<any>;
-}
-
-// @public (undocumented)
-export class RenderModule {
-  static register(config?: RenderConfig): DynamicModule;
-  static registerAsync(options: {
-    imports?: any[];
-    inject?: any[];
-    useFactory: (...args: any[]) => Promise<RenderConfig> | RenderConfig;
-  }): DynamicModule;
-}
-
-// @public
-export interface RenderOptions {
-  layout?: LayoutComponent<any> | false | null;
-  layoutProps?: Record<string, any>;
-}
-
-// @public
-export interface RenderResponse<T = any> {
-  head?: HeadData;
-  layoutProps?: Record<string, any>;
-  props: T;
-}
-
-// @public (undocumented)
-export class RenderService {
-  constructor(
-    templateParser: TemplateParserService,
-    streamingErrorHandler: StreamingErrorHandler,
-    ssrMode?: SSRMode,
-    defaultHead?: HeadData | undefined,
-    customTemplate?: string,
-  );
-  getRootLayout(): Promise<any | null>;
-  render(
-    viewComponent: any,
-    data?: any,
-    res?: Response_2,
-    head?: HeadData,
-  ): Promise<string | void>;
-  // (undocumented)
-  setViteServer(vite: ViteDevServer): void;
-}
-
-// @public
-export type SSRMode = 'string' | 'stream';
-
-// @public
-export class StreamingErrorHandler {
-  constructor(
-    errorPageDevelopment?:
-      | ComponentType<ErrorPageDevelopmentProps$1>
-      | undefined,
-    errorPageProduction?: ComponentType | undefined,
-  );
-  handleShellError(
-    error: Error,
-    res: Response_2,
-    viewPath: string,
-    isDevelopment: boolean,
-  ): void;
-  handleStreamError(error: Error, viewPath: string): void;
-}
-
-// @public
-export class TemplateParserService {
-  buildHeadTags(head?: HeadData): string;
-  buildInlineScripts(
-    data: any,
-    context: any,
-    componentName: string,
-    layouts?: Array<{
-      layout: any;
-      props?: any;
-    }>,
-  ): string;
-  getClientScriptTag(isDevelopment: boolean, manifest?: any): string;
-  getStylesheetTags(isDevelopment: boolean, manifest?: any): string;
-  // Warning: (ae-forgotten-export) The symbol "TemplateParts" needs to be exported by the entry point index.d.ts
-  parseTemplate(html: string): TemplateParts;
-}
-
-// @public
-export function usePageContext(): RenderContext;
-
-// @public
-export function useParams(): Record<string, string>;
-
-// @public
-export function useQuery(): Record<string, string | string[]>;
-
-// @public
-export function useUserAgent(): string | undefined;
-
-// (No @packageDocumentation comment for this package)
-```
+## API Report File for "@nestjs-ssr/react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { CallHandler } from '@nestjs/common';
+import { ComponentType } from 'react';
+import { DynamicModule } from '@nestjs/common';
+import { ExecutionContext } from '@nestjs/common';
+import { NestInterceptor } from '@nestjs/common';
+import { Observable } from 'rxjs';
+import { default as React_2 } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Reflector } from '@nestjs/core';
+import { Response as Response_2 } from 'express';
+import { ViteDevServer } from 'vite';
+
+// @public
+export function createSSRHooks<T extends RenderContext = RenderContext>(): {
+    usePageContext: () => T;
+    useParams: () => Record<string, string>;
+    useQuery: () => Record<string, string | string[]>;
+    useRequest: () => T;
+    useHeaders: () => Record<string, string>;
+    useHeader: (name: string) => string | undefined;
+    useCookies: () => Record<string, string>;
+    useCookie: (name: string) => string | undefined;
+};
+
+// Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps" needs to be exported by the entry point index.d.ts
+//
+// @public
+export function ErrorPageDevelopment({ error, viewPath, phase, }: ErrorPageDevelopmentProps): react_jsx_runtime.JSX.Element;
+
+// @public
+export function ErrorPageProduction(): react_jsx_runtime.JSX.Element;
+
+// @public
+export interface HeadData {
+    bodyAttributes?: Record<string, string>;
+    canonical?: string;
+    description?: string;
+    htmlAttributes?: Record<string, string>;
+    jsonLd?: Array<Record<string, any>>;
+    keywords?: string;
+    links?: Array<{
+        rel: string;
+        href: string;
+        as?: string;
+        type?: string;
+        crossorigin?: string;
+        [key: string]: any;
+    }>;
+    meta?: Array<{
+        name?: string;
+        property?: string;
+        content: string;
+        [key: string]: any;
+    }>;
+    ogDescription?: string;
+    ogImage?: string;
+    ogTitle?: string;
+    scripts?: Array<{
+        src?: string;
+        async?: boolean;
+        defer?: boolean;
+        type?: string;
+        innerHTML?: string;
+        [key: string]: any;
+    }>;
+    title?: string;
+}
+
+// @public
+export function Layout(layout: LayoutComponent<any>, options?: LayoutDecoratorOptions): ClassDecorator;
+
+// @public
+export type LayoutComponent<TProps = {}> = ComponentType<LayoutProps<TProps>>;
+
+// @public
+export interface LayoutDecoratorOptions {
+    props?: Record<string, any>;
+    skipRoot?: boolean;
+}
+
+// @public
+export interface LayoutProps<TProps = {}> {
+    children: ReactNode;
+    context?: RenderContext;
+    head?: HeadData;
+    layoutProps?: TProps;
+}
+
+// @public
+export interface PageComponentWithLayout<TPageProps = {}, TLayoutProps = {}> {
+    (props: TPageProps): ReactNode;
+    layout?: LayoutComponent<TLayoutProps>;
+    layoutProps?: TLayoutProps;
+}
+
+// @public
+export function PageContextProvider({ context: initialContext, children, isSegment, }: {
+    context: RenderContext;
+    children: React_2.ReactNode;
+    isSegment?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+// @public
+export type PageProps<TProps = {}> = TProps & {
+    head?: HeadData;
+};
+
+// Warning: (ae-forgotten-export) The symbol "RenderReturnType" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "ExtractComponentData" needs to be exported by the entry point index.d.ts
+//
+// @public
+export function Render<T extends React_2.ComponentType<any>>(component: T, options?: RenderOptions): <TMethod extends (...args: any[]) => RenderReturnType<ExtractComponentData<T>> | Promise<RenderReturnType<ExtractComponentData<T>>>>(target: any, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<TMethod>) => TypedPropertyDescriptor<TMethod> | void;
+
+// @public
+export interface RenderConfig {
+    allowedCookies?: string[];
+    allowedHeaders?: string[];
+    defaultHead?: HeadData;
+    // Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps$1" needs to be exported by the entry point index.d.ts
+    errorPageDevelopment?: ComponentType<ErrorPageDevelopmentProps$1>;
+    errorPageProduction?: ComponentType;
+    mode?: SSRMode;
+    template?: string;
+    timeout?: number;
+    // Warning: (ae-forgotten-export) The symbol "ViteConfig" needs to be exported by the entry point index.d.ts
+    vite?: ViteConfig;
+}
+
+// @public
+export interface RenderContext {
+    // (undocumented)
+    method: string;
+    // (undocumented)
+    params: Record<string, string>;
+    // (undocumented)
+    path: string;
+    // (undocumented)
+    query: Record<string, string | string[]>;
+    // (undocumented)
+    url: string;
+}
+
+// @public (undocumented)
+export class RenderInterceptor implements NestInterceptor {
+    constructor(reflector: Reflector, renderService: RenderService, allowedHeaders?: string[] | undefined, allowedCookies?: string[] | undefined);
+    // (undocumented)
+    intercept(context: ExecutionContext, next: CallHandler): Observable<any>;
+}
+
+// @public (undocumented)
+export class RenderModule {
+    static forRoot(config?: RenderConfig): DynamicModule;
+    static forRootAsync(options: {
+        imports?: any[];
+        inject?: any[];
+        useFactory: (...args: any[]) => Promise<RenderConfig> | RenderConfig;
+    }): DynamicModule;
+    // @deprecated (undocumented)
+    static register(config?: RenderConfig): DynamicModule;
+    // @deprecated (undocumented)
+    static registerAsync(options: {
+        imports?: any[];
+        inject?: any[];
+        useFactory: (...args: any[]) => Promise<RenderConfig> | RenderConfig;
+    }): DynamicModule;
+}
+
+// @public
+export interface RenderOptions {
+    layout?: LayoutComponent<any> | false | null;
+    layoutProps?: Record<string, any>;
+}
+
+// @public
+export interface RenderResponse<T = any> {
+    head?: HeadData;
+    layoutProps?: Record<string, any>;
+    props: T;
+}
+
+// @public
+export class RenderService {
+    // Warning: (ae-forgotten-export) The symbol "StringRenderer" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "StreamRenderer" needs to be exported by the entry point index.d.ts
+    constructor(stringRenderer: StringRenderer, streamRenderer: StreamRenderer, ssrMode?: SSRMode, defaultHead?: HeadData | undefined, customTemplate?: string);
+    getRootLayout(): Promise<any | null>;
+    render(viewComponent: any, data?: any, res?: Response_2, head?: HeadData): Promise<string | void>;
+    // Warning: (ae-forgotten-export) The symbol "SegmentResponse" needs to be exported by the entry point index.d.ts
+    renderSegment(viewComponent: any, data: any, swapTarget: string, head?: HeadData): Promise<SegmentResponse>;
+    // (undocumented)
+    setViteServer(vite: ViteDevServer): void;
+}
+
+// @public
+export type SSRMode = 'string' | 'stream';
+
+// @public
+export class StreamingErrorHandler {
+    constructor(errorPageDevelopment?: ComponentType<ErrorPageDevelopmentProps$1> | undefined, errorPageProduction?: ComponentType | undefined);
+    handleShellError(error: Error, res: Response_2, viewPath: string, isDevelopment: boolean): void;
+    handleStreamError(error: Error, viewPath: string): void;
+}
+
+// @public
+export class TemplateParserService {
+    buildHeadTags(head?: HeadData): string;
+    buildInlineScripts(data: any, context: any, componentName: string, layouts?: Array<{
+        layout: any;
+        props?: any;
+    }>): string;
+    getClientScriptTag(isDevelopment: boolean, manifest?: any): string;
+    getStylesheetTags(isDevelopment: boolean, manifest?: any): string;
+    // Warning: (ae-forgotten-export) The symbol "TemplateParts" needs to be exported by the entry point index.d.ts
+    parseTemplate(html: string): TemplateParts;
+}
+
+// @public (undocumented)
+export const useCookie: (name: string) => string | undefined;
+
+// @public (undocumented)
+export const useCookies: () => Record<string, string>;
+
+// @public (undocumented)
+export const useHeader: (name: string) => string | undefined;
+
+// @public (undocumented)
+export const useHeaders: () => Record<string, string>;
+
+// @public (undocumented)
+export const usePageContext: () => RenderContext;
+
+// @public (undocumented)
+export const useParams: () => Record<string, string>;
+
+// @public (undocumented)
+export const useQuery: () => Record<string, string | string[]>;
+
+// @public (undocumented)
+export const useRequest: () => RenderContext;
+
+// (No @packageDocumentation comment for this package)
+
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestjs-ssr/react",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "React SSR for NestJS that respects Clean Architecture. Proper DI, SOLID principles, clear separation of concerns.",
   "keywords": [
     "nestjs",

package/src/templates/entry-client.tsx

@@ -1,4 +1,5 @@
 /// <reference types="@nestjs-ssr/react/global" />
+
 import React, { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import {
@@ -10,6 +11,15 @@ const componentName = window.__COMPONENT_NAME__;
 const initialProps = window.__INITIAL_STATE__ || {};
 const renderContext = window.__CONTEXT__ || {};
 
+// Auto-discover root layout using Vite's glob import (must match server-side discovery)
+// @ts-ignore - Vite-specific API
+const layoutModules = import.meta.glob('@/views/layout.tsx', {
+  eager: true,
+}) as Record<string, { default: React.ComponentType<any> }>;
+
+const layoutPath = Object.keys(layoutModules)[0];
+const RootLayout = layoutPath ? layoutModules[layoutPath].default : null;
+
 // Auto-import all view components using Vite's glob feature
 // Exclude entry-client.tsx and entry-server.tsx from the glob
 // @ts-ignore - Vite-specific API
@@ -111,40 +121,53 @@ function hasLayout(
 function composeWithLayout(
   ViewComponent: React.ComponentType<any>,
   props: any,
+  context?: any,
+  layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [],
 ): React.ReactElement {
-  const element = <ViewComponent {...props} />;
-
-  // Check if component has a layout
-  if (!hasLayout(ViewComponent)) {
-    return element;
-  }
-
-  // Collect all layouts in the chain (innermost to outermost)
-  const layoutChain: Array<{
-    Layout: React.ComponentType<any>;
-    layoutProps: any;
-  }> = [];
-  let currentComponent: any = ViewComponent;
-
-  while (hasLayout(currentComponent)) {
-    layoutChain.push({
-      Layout: currentComponent.layout,
-      layoutProps: currentComponent.layoutProps || {},
-    });
-    currentComponent = currentComponent.layout;
+  // Start with the page component
+  let result = <ViewComponent {...props} />;
+
+  // If no layouts passed, check if component has its own layout chain
+  if (layouts.length === 0 && hasLayout(ViewComponent)) {
+    let currentComponent: any = ViewComponent;
+    while (hasLayout(currentComponent)) {
+      layouts.push({
+        layout: currentComponent.layout,
+        props: currentComponent.layoutProps || {},
+      });
+      currentComponent = currentComponent.layout;
+    }
   }
 
-  // Wrap the element with layouts from innermost to outermost
-  let result = element;
-  for (const { Layout, layoutProps } of layoutChain) {
-    result = <Layout layoutProps={layoutProps}>{result}</Layout>;
+  // Wrap with each layout in the chain
+  // Must match server-side wrapping with data-layout and data-outlet attributes
+  for (const { layout: Layout, props: layoutProps } of layouts) {
+    const layoutName = Layout.displayName || Layout.name || 'Layout';
+    result = (
+      <div data-layout={layoutName}>
+        <Layout context={context} layoutProps={layoutProps}>
+          <div data-outlet={layoutName}>{result}</div>
+        </Layout>
+      </div>
+    );
   }
 
   return result;
 }
 
+// Build layouts array - use RootLayout if it exists (matching server behavior)
+const layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [];
+if (RootLayout) {
+  layouts.push({ layout: RootLayout, props: {} });
+}
+
 // Compose the component with its layout (if any)
-const composedElement = composeWithLayout(ViewComponent, initialProps);
+const composedElement = composeWithLayout(
+  ViewComponent,
+  initialProps,
+  renderContext,
+  layouts,
+);
 
 // Wrap with providers to make context and navigation state available via hooks
 const wrappedElement = (