@nestjs-ssr/react 0.3.3 → 0.3.5

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 });
@@ -315,9 +314,13 @@ var StringRenderer = class _StringRenderer {
         throw new Error("Server bundle not found in manifest. Run `pnpm build:server` to generate the server bundle.");
       }
     }
-    const { data: pageData, __context: pageContext } = data;
+    const { data: pageData, __context: pageContext, __layouts: layouts } = data;
     const html = await renderModule.renderSegment(viewComponent, data);
     const componentName = viewComponent.displayName || viewComponent.name || "Component";
+    const layoutMetadata = layouts ? layouts.map((l) => ({
+      name: l.layout.displayName || l.layout.name || "default",
+      props: l.props
+    })) : [];
     if (context.isDevelopment) {
       const duration = Date.now() - startTime;
       this.logger.log(`[SSR] ${componentName} segment rendered in ${duration}ms`);
@@ -328,7 +331,8 @@ var StringRenderer = class _StringRenderer {
       props: pageData,
       swapTarget,
       componentName,
-      context: pageContext
+      context: pageContext,
+      layouts: layoutMetadata
     };
   }
 };
@@ -339,16 +343,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 +405,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 +455,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 +524,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 +536,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);
   }
   /**
@@ -1075,11 +1083,13 @@ exports.RenderInterceptor = class RenderInterceptor {
   renderService;
   allowedHeaders;
   allowedCookies;
-  constructor(reflector, renderService, allowedHeaders, allowedCookies) {
+  contextFactory;
+  constructor(reflector, renderService, allowedHeaders, allowedCookies, contextFactory) {
     this.reflector = reflector;
     this.renderService = renderService;
     this.allowedHeaders = allowedHeaders;
     this.allowedCookies = allowedCookies;
+    this.contextFactory = contextFactory;
   }
   /**
   * Resolve the layout hierarchy for a given route
@@ -1219,6 +1229,14 @@ exports.RenderInterceptor = class RenderInterceptor {
           renderContext.cookies = cookies;
         }
       }
+      if (this.contextFactory) {
+        const customContext = await this.contextFactory({
+          req: request
+        });
+        if (customContext) {
+          Object.assign(renderContext, customContext);
+        }
+      }
       const renderResponse = isRenderResponse(data) ? data : {
         props: data
       };
@@ -1265,12 +1283,15 @@ exports.RenderInterceptor = _ts_decorate6([
   _ts_param3(2, common.Inject("ALLOWED_HEADERS")),
   _ts_param3(3, common.Optional()),
   _ts_param3(3, common.Inject("ALLOWED_COOKIES")),
+  _ts_param3(4, common.Optional()),
+  _ts_param3(4, common.Inject("CONTEXT_FACTORY")),
   _ts_metadata5("design:type", Function),
   _ts_metadata5("design:paramtypes", [
     typeof core.Reflector === "undefined" ? Object : core.Reflector,
     typeof exports.RenderService === "undefined" ? Object : exports.RenderService,
     Array,
-    Array
+    Array,
+    typeof ContextFactory === "undefined" ? Object : ContextFactory
   ])
 ], exports.RenderInterceptor);
 function _ts_decorate7(decorators, target, key, desc) {
@@ -1514,6 +1535,12 @@ exports.RenderModule = class _RenderModule {
       provide: "ALLOWED_COOKIES",
       useValue: config?.allowedCookies || []
     });
+    if (config?.context) {
+      providers.push({
+        provide: "CONTEXT_FACTORY",
+        useValue: config.context
+      });
+    }
     return {
       global: true,
       module: _RenderModule,
@@ -1632,6 +1659,13 @@ exports.RenderModule = class _RenderModule {
         inject: [
           "RENDER_CONFIG"
         ]
+      },
+      {
+        provide: "CONTEXT_FACTORY",
+        useFactory: /* @__PURE__ */ __name((config) => config?.context, "useFactory"),
+        inject: [
+          "RENDER_CONFIG"
+        ]
       }
     ];
     return {

package/dist/render/index.mjs

@@ -1,11 +1,11 @@
 import { Injectable, Logger, Optional, Inject, Global, Module } from '@nestjs/common';
-import { HttpAdapterHost, APP_INTERCEPTOR, Reflector } from '@nestjs/core';
+import { Reflector, HttpAdapterHost, APP_INTERCEPTOR } from '@nestjs/core';
 import { existsSync, readFileSync } from 'fs';
 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;
@@ -308,9 +308,13 @@ var StringRenderer = class _StringRenderer {
         throw new Error("Server bundle not found in manifest. Run `pnpm build:server` to generate the server bundle.");
       }
     }
-    const { data: pageData, __context: pageContext } = data;
+    const { data: pageData, __context: pageContext, __layouts: layouts } = data;
     const html = await renderModule.renderSegment(viewComponent, data);
     const componentName = viewComponent.displayName || viewComponent.name || "Component";
+    const layoutMetadata = layouts ? layouts.map((l) => ({
+      name: l.layout.displayName || l.layout.name || "default",
+      props: l.props
+    })) : [];
     if (context.isDevelopment) {
       const duration = Date.now() - startTime;
       this.logger.log(`[SSR] ${componentName} segment rendered in ${duration}ms`);
@@ -321,7 +325,8 @@ var StringRenderer = class _StringRenderer {
       props: pageData,
       swapTarget,
       componentName,
-      context: pageContext
+      context: pageContext,
+      layouts: layoutMetadata
     };
   }
 };
@@ -332,6 +337,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 +412,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"
@@ -1068,11 +1077,13 @@ var RenderInterceptor = class {
   renderService;
   allowedHeaders;
   allowedCookies;
-  constructor(reflector, renderService, allowedHeaders, allowedCookies) {
+  contextFactory;
+  constructor(reflector, renderService, allowedHeaders, allowedCookies, contextFactory) {
     this.reflector = reflector;
     this.renderService = renderService;
     this.allowedHeaders = allowedHeaders;
     this.allowedCookies = allowedCookies;
+    this.contextFactory = contextFactory;
   }
   /**
   * Resolve the layout hierarchy for a given route
@@ -1212,6 +1223,14 @@ var RenderInterceptor = class {
           renderContext.cookies = cookies;
         }
       }
+      if (this.contextFactory) {
+        const customContext = await this.contextFactory({
+          req: request
+        });
+        if (customContext) {
+          Object.assign(renderContext, customContext);
+        }
+      }
       const renderResponse = isRenderResponse(data) ? data : {
         props: data
       };
@@ -1258,12 +1277,15 @@ RenderInterceptor = _ts_decorate6([
   _ts_param3(2, Inject("ALLOWED_HEADERS")),
   _ts_param3(3, Optional()),
   _ts_param3(3, Inject("ALLOWED_COOKIES")),
+  _ts_param3(4, Optional()),
+  _ts_param3(4, Inject("CONTEXT_FACTORY")),
   _ts_metadata5("design:type", Function),
   _ts_metadata5("design:paramtypes", [
     typeof Reflector === "undefined" ? Object : Reflector,
     typeof RenderService === "undefined" ? Object : RenderService,
     Array,
-    Array
+    Array,
+    typeof ContextFactory === "undefined" ? Object : ContextFactory
   ])
 ], RenderInterceptor);
 function _ts_decorate7(decorators, target, key, desc) {
@@ -1507,6 +1529,12 @@ var RenderModule = class _RenderModule {
       provide: "ALLOWED_COOKIES",
       useValue: config?.allowedCookies || []
     });
+    if (config?.context) {
+      providers.push({
+        provide: "CONTEXT_FACTORY",
+        useValue: config.context
+      });
+    }
     return {
       global: true,
       module: _RenderModule,
@@ -1625,6 +1653,13 @@ var RenderModule = class _RenderModule {
         inject: [
           "RENDER_CONFIG"
         ]
+      },
+      {
+        provide: "CONTEXT_FACTORY",
+        useFactory: /* @__PURE__ */ __name((config) => config?.context, "useFactory"),
+        inject: [
+          "RENDER_CONFIG"
+        ]
       }
     ];
     return {

package/dist/{render-response.interface-CxbuKGnV.d.mts → render-response.interface-ClWJXKL4.d.mts}

@@ -3,7 +3,7 @@
  * Contains safe request metadata that can be exposed to the client.
  *
  * Extend this interface to add app-specific properties (user, tenant, feature flags, etc.).
- * Use module configuration to pass additional headers or cookies safely.
+ * Use the `context` option in module configuration to enrich the context.
  *
  * @example
  * // Basic usage - use as-is
@@ -32,19 +32,28 @@
  *   theme?: string;  // From cookie
  * }
  *
- * // Configure module to pass specific cookies/headers
- * ReactSSRModule.forRoot({
+ * // Configure module with context factory to enrich context
+ * RenderModule.forRoot({
  *   allowedCookies: ['theme', 'locale'],
  *   allowedHeaders: ['x-tenant-id'],
+ *   context: ({ req }) => ({
+ *     user: req.user,  // From Passport JWT strategy
+ *     tenant: req.tenant,
+ *     featureFlags: req.featureFlags,
+ *   }),
  * })
  *
- * // Use in interceptor/controller
- * const context: AppRenderContext = {
- *   ...baseContext,
- *   user: req.user,
- *   tenant: req.tenant,
- *   featureFlags: await featureFlagService.getFlags(req),
- * };
+ * // Or with async factory (use forRootAsync)
+ * RenderModule.forRootAsync({
+ *   imports: [PermissionModule],
+ *   inject: [PermissionService],
+ *   useFactory: (permissionService) => ({
+ *     context: async ({ req }) => ({
+ *       user: req.user,
+ *       permissions: await permissionService.getForUser(req.user),
+ *     }),
+ *   }),
+ * })
  */
 interface RenderContext {
     url: string;

package/dist/{render-response.interface-CxbuKGnV.d.ts → render-response.interface-ClWJXKL4.d.ts}

@@ -3,7 +3,7 @@
  * Contains safe request metadata that can be exposed to the client.
  *
  * Extend this interface to add app-specific properties (user, tenant, feature flags, etc.).
- * Use module configuration to pass additional headers or cookies safely.
+ * Use the `context` option in module configuration to enrich the context.
  *
  * @example
  * // Basic usage - use as-is
@@ -32,19 +32,28 @@
  *   theme?: string;  // From cookie
  * }
  *
- * // Configure module to pass specific cookies/headers
- * ReactSSRModule.forRoot({
+ * // Configure module with context factory to enrich context
+ * RenderModule.forRoot({
  *   allowedCookies: ['theme', 'locale'],
  *   allowedHeaders: ['x-tenant-id'],
+ *   context: ({ req }) => ({
+ *     user: req.user,  // From Passport JWT strategy
+ *     tenant: req.tenant,
+ *     featureFlags: req.featureFlags,
+ *   }),
  * })
  *
- * // Use in interceptor/controller
- * const context: AppRenderContext = {
- *   ...baseContext,
- *   user: req.user,
- *   tenant: req.tenant,
- *   featureFlags: await featureFlagService.getFlags(req),
- * };
+ * // Or with async factory (use forRootAsync)
+ * RenderModule.forRootAsync({
+ *   imports: [PermissionModule],
+ *   inject: [PermissionService],
+ *   useFactory: (permissionService) => ({
+ *     context: async ({ req }) => ({
+ *       user: req.user,
+ *       permissions: await permissionService.getForUser(req.user),
+ *     }),
+ *   }),
+ * })
  */
 interface RenderContext {
     url: string;

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
@@ -105,46 +115,68 @@ function hasLayout(
 }
 
 /**
- * Compose a component with its layout (and nested layouts if any)
- * This must match the server-side composition in entry-server.tsx
+ * Compose a component with its layout (and nested layouts if any).
+ * This must match the server-side composition in entry-server.tsx.
+ *
+ * The layouts array is ordered [RootLayout, ControllerLayout, MethodLayout] (outer to inner).
+ * We iterate in REVERSE order because wrapping happens inside-out:
+ * - Start with Page
+ * - Wrap with innermost layout first (MethodLayout)
+ * - Then wrap with ControllerLayout
+ * - Finally wrap with RootLayout (outermost)
  */
 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 REVERSE order (innermost to outermost)
+  // This produces the correct nesting: RootLayout > ControllerLayout > Page
+  // Must match server-side wrapping with data-layout and data-outlet attributes
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    const { layout: Layout, props: layoutProps } = layouts[i];
+    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 = (
@@ -160,8 +192,18 @@ hydrateRoot(
   <StrictMode>{wrappedElement}</StrictMode>,
 );
 
+// Track if initial hydration is complete to ignore false popstate events
+let hydrationComplete = false;
+requestAnimationFrame(() => {
+  hydrationComplete = true;
+});
+
 // Handle browser back/forward navigation
 window.addEventListener('popstate', async () => {
+  // Ignore popstate events that fire before hydration is complete
+  // (some browsers fire popstate on initial page load)
+  if (!hydrationComplete) return;
+
   // Dynamically import navigate to avoid circular dependency with hydrate-segment
   const { navigate } = await import('@nestjs-ssr/react/client');
   // Re-navigate to the current URL (browser already updated location)

package/dist/templates/entry-server.tsx

@@ -25,6 +25,13 @@ export function getRootLayout(): React.ComponentType<any> | null {
  * Layouts are passed from the RenderInterceptor based on decorators.
  * Each layout is wrapped with data-layout and data-outlet attributes
  * for client-side navigation segment swapping.
+ *
+ * The layouts array is ordered [RootLayout, ControllerLayout, MethodLayout] (outer to inner).
+ * We iterate in REVERSE order because wrapping happens inside-out:
+ * - Start with Page
+ * - Wrap with innermost layout first (MethodLayout)
+ * - Then wrap with ControllerLayout
+ * - Finally wrap with RootLayout (outermost)
  */
 function composeWithLayouts(
   ViewComponent: React.ComponentType<any>,
@@ -35,11 +42,12 @@ function composeWithLayouts(
   // Start with the page component
   let result = <ViewComponent {...props} />;
 
-  // Wrap with each layout in the chain (outermost to innermost in array)
-  // We iterate normally because layouts are already in correct order from interceptor
+  // Wrap with each layout in REVERSE order (innermost to outermost)
+  // This produces the correct nesting: RootLayout > ControllerLayout > Page
   // Pass context to layouts so they can access path, params, etc. for navigation
   // Each layout gets data-layout attribute and children are wrapped in data-outlet
-  for (const { layout: Layout, props: layoutProps } of layouts) {
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    const { layout: Layout, props: layoutProps } = layouts[i];
     const layoutName = Layout.displayName || Layout.name || 'Layout';
     result = (
       <div data-layout={layoutName}>
@@ -80,19 +88,28 @@ export function renderComponent(
 }
 
 /**
- * Render just the page component for segment navigation.
- * No layout wrappers - the layout already exists on the client.
+ * Render a segment for client-side navigation.
+ * Includes any layouts below the swap target (e.g., nested layouts).
+ * The swap target's outlet will receive this rendered content.
  */
 export function renderSegment(
   ViewComponent: React.ComponentType<any>,
   data: any,
 ) {
-  const { data: pageData, __context: context } = data;
+  const { data: pageData, __context: context, __layouts: layouts } = data;
+
+  // Compose with filtered layouts (layouts below the swap target)
+  const composedElement = composeWithLayouts(
+    ViewComponent,
+    pageData,
+    layouts,
+    context,
+  );
 
-  // Render just the page component, no layout wrappers
+  // Wrap with PageContextProvider to make context available via hooks
   const element = (
     <PageContextProvider context={context}>
-      <ViewComponent {...pageData} />
+      {composedElement}
     </PageContextProvider>
   );
 

package/dist/{use-page-context-CGT9woWe.d.mts → use-page-context-CVC9DHcL.d.mts}

@@ -1,4 +1,4 @@
-import { H as HeadData, R as RenderContext } from './render-response.interface-CxbuKGnV.mjs';
+import { H as HeadData, R as RenderContext } from './render-response.interface-ClWJXKL4.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
@@ -85,6 +85,7 @@ declare function updatePageContext(context: RenderContext): void;
  *
  * @param isSegment - If true, this is a segment provider (for hydrated segments)
  *                    and won't register its setter to avoid overwriting the root provider's.
+ *                    However, it will still receive broadcasts when context updates.
  */
 declare function PageContextProvider({ context: initialContext, children, isSegment, }: {
     context: RenderContext;

package/dist/{use-page-context-05ODF4zW.d.ts → use-page-context-DChgHhL9.d.ts}

@@ -1,4 +1,4 @@
-import { H as HeadData, R as RenderContext } from './render-response.interface-CxbuKGnV.js';
+import { H as HeadData, R as RenderContext } from './render-response.interface-ClWJXKL4.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
@@ -85,6 +85,7 @@ declare function updatePageContext(context: RenderContext): void;
  *
  * @param isSegment - If true, this is a segment provider (for hydrated segments)
  *                    and won't register its setter to avoid overwriting the root provider's.
+ *                    However, it will still receive broadcasts when context updates.
  */
 declare function PageContextProvider({ context: initialContext, children, isSegment, }: {
     context: RenderContext;