@nestjs-ssr/react 0.3.4 → 0.3.6

package/dist/templates/entry-client.tsx

@@ -115,8 +115,15 @@ 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>,
@@ -139,9 +146,11 @@ function composeWithLayout(
     }
   }
 
-  // Wrap with each layout in the chain
+  // 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 (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}>
@@ -183,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestjs-ssr/react",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "React SSR for NestJS that respects Clean Architecture. Proper DI, SOLID principles, clear separation of concerns.",
   "keywords": [
     "nestjs",
@@ -112,6 +112,8 @@
     "@nestjs/common": "^11.0.0",
     "@nestjs/core": "^11.0.0",
     "@nestjs/platform-express": "^11.0.0",
+    "@nestjs/platform-fastify": "^11.0.0",
+    "@fastify/static": "^8.0.0 || ^7.0.0",
     "http-proxy-middleware": "^3.0.0 || ^2.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -119,6 +121,15 @@
     "vite": "^7.0.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
+    "@nestjs/platform-express": {
+      "optional": true
+    },
+    "@nestjs/platform-fastify": {
+      "optional": true
+    },
+    "@fastify/static": {
+      "optional": true
+    },
     "http-proxy-middleware": {
       "optional": true
     }

package/src/templates/entry-client.tsx

@@ -115,8 +115,15 @@ 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>,
@@ -139,9 +146,11 @@ function composeWithLayout(
     }
   }
 
-  // Wrap with each layout in the chain
+  // 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 (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}>
@@ -183,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/src/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>
   );