@nestjs-ssr/react 0.1.12 → 0.2.0

package/dist/render/index.mjs

@@ -2,7 +2,7 @@ import { Injectable, Logger, Optional, Inject, Global, Module } from '@nestjs/co
 import { HttpAdapterHost, APP_INTERCEPTOR, Reflector } from '@nestjs/core';
 import { existsSync, readFileSync } from 'fs';
 import { join, relative } from 'path';
-import serialize from 'serialize-javascript';
+import { uneval } from 'devalue';
 import escapeHtml from 'escape-html';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { createElement } from 'react';
@@ -98,21 +98,20 @@ var TemplateParserService = class {
   /**
   * Build inline script that provides initial state to the client
   *
-  * Safely serializes data using serialize-javascript to avoid XSS vulnerabilities.
-  * This library handles all edge cases including escaping dangerous characters,
-  * functions, dates, regexes, and prevents prototype pollution.
+  * Safely serializes data using devalue to avoid XSS vulnerabilities.
+  * Devalue is designed specifically for SSR, handling complex types safely
+  * while being faster and more secure than alternatives.
   */
-  buildInlineScripts(data, context, componentName) {
+  buildInlineScripts(data, context, componentName, layouts) {
+    const layoutMetadata = layouts ? layouts.map((l) => ({
+      name: l.layout.displayName || l.layout.name || "default",
+      props: l.props
+    })) : [];
     return `<script>
-window.__INITIAL_STATE__ = ${serialize(data, {
-      isJSON: true
-    })};
-window.__CONTEXT__ = ${serialize(context, {
-      isJSON: true
-    })};
-window.__COMPONENT_NAME__ = ${serialize(componentName, {
-      isJSON: true
-    })};
+window.__INITIAL_STATE__ = ${uneval(data)};
+window.__CONTEXT__ = ${uneval(context)};
+window.__COMPONENT_NAME__ = ${uneval(componentName)};
+window.__LAYOUTS__ = ${uneval(layoutMetadata)};
 </script>`;
   }
   /**
@@ -421,12 +420,14 @@ var RenderService = class _RenderService {
   isDevelopment;
   ssrMode;
   entryServerPath;
-  constructor(templateParser, streamingErrorHandler, ssrMode, defaultHead) {
+  rootLayout = void 0;
+  rootLayoutChecked = false;
+  constructor(templateParser, streamingErrorHandler, ssrMode, defaultHead, customTemplate) {
     this.templateParser = templateParser;
     this.streamingErrorHandler = streamingErrorHandler;
     this.defaultHead = defaultHead;
     this.isDevelopment = process.env.NODE_ENV !== "production";
-    this.ssrMode = ssrMode || process.env.SSR_MODE || "string";
+    this.ssrMode = ssrMode || process.env.SSR_MODE || "stream";
     const absoluteServerPath = join(__dirname, "/templates/entry-server.tsx");
     const relativeServerPath = relative(process.cwd(), absoluteServerPath);
     if (relativeServerPath.startsWith("..")) {
@@ -434,36 +435,54 @@ var RenderService = class _RenderService {
     } else {
       this.entryServerPath = "/" + relativeServerPath.replace(/\\/g, "/");
     }
-    let templatePath;
-    if (this.isDevelopment) {
-      const packageTemplatePaths = [
-        join(__dirname, "../templates/index.html"),
-        join(__dirname, "../src/templates/index.html"),
-        join(__dirname, "../../src/templates/index.html")
-      ];
-      const localTemplatePath = join(process.cwd(), "src/views/index.html");
-      const foundPackageTemplate = packageTemplatePaths.find((p) => existsSync(p));
-      if (foundPackageTemplate) {
-        templatePath = foundPackageTemplate;
-      } else if (existsSync(localTemplatePath)) {
-        templatePath = localTemplatePath;
+    if (customTemplate) {
+      if (customTemplate.includes("<!DOCTYPE") || customTemplate.includes("<html")) {
+        this.template = customTemplate;
+        this.logger.log(`\u2713 Loaded custom template (inline)`);
       } else {
-        throw new Error(`Template file not found. Tried:
+        const customTemplatePath = customTemplate.startsWith("/") ? customTemplate : join(process.cwd(), customTemplate);
+        if (!existsSync(customTemplatePath)) {
+          throw new Error(`Custom template file not found at ${customTemplatePath}`);
+        }
+        try {
+          this.template = readFileSync(customTemplatePath, "utf-8");
+          this.logger.log(`\u2713 Loaded custom template from ${customTemplatePath}`);
+        } catch (error) {
+          throw new Error(`Failed to read custom template file at ${customTemplatePath}: ${error.message}`);
+        }
+      }
+    } else {
+      let templatePath;
+      if (this.isDevelopment) {
+        const packageTemplatePaths = [
+          join(__dirname, "../templates/index.html"),
+          join(__dirname, "../src/templates/index.html"),
+          join(__dirname, "../../src/templates/index.html")
+        ];
+        const localTemplatePath = join(process.cwd(), "src/views/index.html");
+        const foundPackageTemplate = packageTemplatePaths.find((p) => existsSync(p));
+        if (foundPackageTemplate) {
+          templatePath = foundPackageTemplate;
+        } else if (existsSync(localTemplatePath)) {
+          templatePath = localTemplatePath;
+        } else {
+          throw new Error(`Template file not found. Tried:
 ` + packageTemplatePaths.map((p) => `  - ${p} (package template)`).join("\n") + `
   - ${localTemplatePath} (local template)`);
+        }
+      } else {
+        templatePath = join(process.cwd(), "dist/client/index.html");
+        if (!existsSync(templatePath)) {
+          throw new Error(`Template file not found at ${templatePath}. Make sure to run the build process first.`);
+        }
       }
-    } else {
-      templatePath = join(process.cwd(), "dist/client/index.html");
-      if (!existsSync(templatePath)) {
-        throw new Error(`Template file not found at ${templatePath}. Make sure to run the build process first.`);
+      try {
+        this.template = readFileSync(templatePath, "utf-8");
+        this.logger.log(`\u2713 Loaded template from ${templatePath}`);
+      } catch (error) {
+        throw new Error(`Failed to read template file at ${templatePath}: ${error.message}`);
       }
     }
-    try {
-      this.template = readFileSync(templatePath, "utf-8");
-      this.logger.log(`\u2713 Loaded template from ${templatePath}`);
-    } catch (error) {
-      throw new Error(`Failed to read template file at ${templatePath}: ${error.message}`);
-    }
     if (!this.isDevelopment) {
       const manifestPath = join(process.cwd(), "dist/client/.vite/manifest.json");
       if (existsSync(manifestPath)) {
@@ -483,6 +502,52 @@ var RenderService = class _RenderService {
     this.vite = vite;
   }
   /**
+  * Get the root layout component if it exists
+  * Auto-discovers layout files at conventional paths:
+  * - src/views/layout.tsx
+  * - src/views/layout/index.tsx
+  * - src/views/_layout.tsx
+  */
+  async getRootLayout() {
+    if (this.rootLayoutChecked) {
+      return this.rootLayout;
+    }
+    this.rootLayoutChecked = true;
+    const conventionalPaths = [
+      "src/views/layout.tsx",
+      "src/views/layout/index.tsx",
+      "src/views/_layout.tsx"
+    ];
+    try {
+      for (const path of conventionalPaths) {
+        const absolutePath = join(process.cwd(), path);
+        if (!existsSync(absolutePath)) {
+          continue;
+        }
+        this.logger.log(`\u2713 Found root layout at ${path}`);
+        if (this.vite) {
+          const layoutModule = await this.vite.ssrLoadModule("/" + path);
+          this.rootLayout = layoutModule.default;
+          return this.rootLayout;
+        } else {
+          const prodPath = path.replace("src/views", "dist/server/views").replace(".tsx", ".js");
+          const absoluteProdPath = join(process.cwd(), prodPath);
+          if (existsSync(absoluteProdPath)) {
+            const layoutModule = await import(absoluteProdPath);
+            this.rootLayout = layoutModule.default;
+            return this.rootLayout;
+          }
+        }
+      }
+      this.rootLayout = null;
+      return null;
+    } catch (error) {
+      this.logger.warn(`\u26A0\uFE0F  Error loading root layout: ${error.message}`);
+      this.rootLayout = null;
+      return null;
+    }
+  }
+  /**
   * Main render method that routes to string or stream mode
   */
   async render(viewComponent, data = {}, res, head) {
@@ -544,20 +609,19 @@ var RenderService = class _RenderService {
           throw new Error("Server bundle not found in manifest. Run `pnpm build:server` to generate the server bundle.");
         }
       }
-      const { data: pageData, __context: context } = data;
+      const { data: pageData, __context: context, __layouts: layouts } = data;
       const appHtml = await renderModule.renderComponent(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
+      })) : [];
       const initialStateScript = `
         <script>
-          window.__INITIAL_STATE__ = ${serialize(pageData, {
-        isJSON: true
-      })};
-          window.__CONTEXT__ = ${serialize(context, {
-        isJSON: true
-      })};
-          window.__COMPONENT_NAME__ = ${serialize(componentName, {
-        isJSON: true
-      })};
+          window.__INITIAL_STATE__ = ${uneval(pageData)};
+          window.__CONTEXT__ = ${uneval(context)};
+          window.__COMPONENT_NAME__ = ${uneval(componentName)};
+          window.__LAYOUTS__ = ${uneval(layoutMetadata)};
         </script>
       `;
       let clientScript = "";
@@ -630,9 +694,9 @@ var RenderService = class _RenderService {
           throw new Error("Server bundle not found in manifest. Run `pnpm build:server` to generate the server bundle.");
         }
       }
-      const { data: pageData, __context: context } = data;
+      const { data: pageData, __context: context, __layouts: layouts } = data;
       const componentName = viewComponent.displayName || viewComponent.name || "Component";
-      const inlineScripts = this.templateParser.buildInlineScripts(pageData, context, componentName);
+      const inlineScripts = this.templateParser.buildInlineScripts(pageData, context, componentName, layouts);
       const clientScript = this.templateParser.getClientScriptTag(this.isDevelopment, this.manifest);
       const stylesheetTags = this.templateParser.getStylesheetTags(this.isDevelopment, this.manifest);
       const headTags = this.templateParser.buildHeadTags(head);
@@ -688,15 +752,20 @@ RenderService = _ts_decorate3([
   _ts_param2(2, Inject("SSR_MODE")),
   _ts_param2(3, Optional()),
   _ts_param2(3, Inject("DEFAULT_HEAD")),
+  _ts_param2(4, Optional()),
+  _ts_param2(4, Inject("CUSTOM_TEMPLATE")),
   _ts_metadata2("design:type", Function),
   _ts_metadata2("design:paramtypes", [
     typeof TemplateParserService === "undefined" ? Object : TemplateParserService,
     typeof StreamingErrorHandler === "undefined" ? Object : StreamingErrorHandler,
     typeof SSRMode === "undefined" ? Object : SSRMode,
-    typeof HeadData === "undefined" ? Object : HeadData
+    typeof HeadData === "undefined" ? Object : HeadData,
+    String
   ])
 ], RenderService);
 var RENDER_KEY = "render";
+var RENDER_OPTIONS_KEY = "render_options";
+var LAYOUT_KEY = "layout";
 
 // src/render/render.interceptor.ts
 function _ts_decorate4(decorators, target, key, desc) {
@@ -710,6 +779,12 @@ function _ts_metadata3(k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 __name(_ts_metadata3, "_ts_metadata");
+function _ts_param3(paramIndex, decorator) {
+  return function(target, key) {
+    decorator(target, key, paramIndex);
+  };
+}
+__name(_ts_param3, "_ts_param");
 function isRenderResponse(data) {
   return data && typeof data === "object" && "props" in data;
 }
@@ -720,9 +795,60 @@ var RenderInterceptor = class {
   }
   reflector;
   renderService;
-  constructor(reflector, renderService) {
+  allowedHeaders;
+  allowedCookies;
+  constructor(reflector, renderService, allowedHeaders, allowedCookies) {
     this.reflector = reflector;
     this.renderService = renderService;
+    this.allowedHeaders = allowedHeaders;
+    this.allowedCookies = allowedCookies;
+  }
+  /**
+  * Resolve the layout hierarchy for a given route
+  * Hierarchy: Root Layout → Controller Layout → Method Layout → Page
+  *
+  * Props are merged in priority order:
+  * 1. Static props from @Layout decorator (base)
+  * 2. Static props from @Render decorator (override)
+  * 3. Dynamic props from controller return (final override)
+  */
+  async resolveLayoutChain(context, dynamicLayoutProps) {
+    const layouts = [];
+    const rootLayout = await this.renderService.getRootLayout();
+    if (rootLayout) {
+      layouts.push({
+        layout: rootLayout,
+        props: dynamicLayoutProps || {}
+      });
+    }
+    const controllerLayoutMeta = this.reflector.get(LAYOUT_KEY, context.getClass());
+    const renderOptions = this.reflector.get(RENDER_OPTIONS_KEY, context.getHandler());
+    if (renderOptions?.layout === null) {
+      return [];
+    } else if (renderOptions?.layout === false) {
+      return layouts;
+    }
+    if (controllerLayoutMeta) {
+      const mergedProps = {
+        ...controllerLayoutMeta.options?.props || {},
+        ...dynamicLayoutProps || {}
+      };
+      layouts.push({
+        layout: controllerLayoutMeta.layout,
+        props: mergedProps
+      });
+    }
+    if (renderOptions?.layout) {
+      const mergedProps = {
+        ...renderOptions.layoutProps || {},
+        ...dynamicLayoutProps || {}
+      };
+      layouts.push({
+        layout: renderOptions.layout,
+        props: mergedProps
+      });
+    }
+    return layouts;
   }
   intercept(context, next) {
     const viewPathOrComponent = this.reflector.get(RENDER_KEY, context.getHandler());
@@ -738,16 +864,36 @@ var RenderInterceptor = class {
         path: request.path,
         query: request.query,
         params: request.params,
-        userAgent: request.headers["user-agent"],
-        acceptLanguage: request.headers["accept-language"],
-        referer: request.headers.referer
+        method: request.method
       };
+      if (this.allowedHeaders?.length) {
+        for (const headerName of this.allowedHeaders) {
+          const value = request.headers[headerName.toLowerCase()];
+          if (value) {
+            renderContext[headerName] = Array.isArray(value) ? value.join(", ") : value;
+          }
+        }
+      }
+      if (this.allowedCookies?.length && request.cookies) {
+        const cookies = {};
+        for (const cookieName of this.allowedCookies) {
+          const value = request.cookies[cookieName];
+          if (value !== void 0) {
+            cookies[cookieName] = value;
+          }
+        }
+        if (Object.keys(cookies).length > 0) {
+          renderContext.cookies = cookies;
+        }
+      }
       const renderResponse = isRenderResponse(data) ? data : {
         props: data
       };
+      const layoutChain = await this.resolveLayoutChain(context, renderResponse.layoutProps);
       const fullData = {
         data: renderResponse.props,
-        __context: renderContext
+        __context: renderContext,
+        __layouts: layoutChain
       };
       try {
         const html = await this.renderService.render(viewPathOrComponent, fullData, response, renderResponse.head);
@@ -764,10 +910,16 @@ var RenderInterceptor = class {
 };
 RenderInterceptor = _ts_decorate4([
   Injectable(),
+  _ts_param3(2, Optional()),
+  _ts_param3(2, Inject("ALLOWED_HEADERS")),
+  _ts_param3(3, Optional()),
+  _ts_param3(3, Inject("ALLOWED_COOKIES")),
   _ts_metadata3("design:type", Function),
   _ts_metadata3("design:paramtypes", [
     typeof Reflector === "undefined" ? Object : Reflector,
-    typeof RenderService === "undefined" ? Object : RenderService
+    typeof RenderService === "undefined" ? Object : RenderService,
+    Array,
+    Array
   ])
 ], RenderInterceptor);
 function _ts_decorate5(decorators, target, key, desc) {
@@ -781,12 +933,12 @@ function _ts_metadata4(k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 __name(_ts_metadata4, "_ts_metadata");
-function _ts_param3(paramIndex, decorator) {
+function _ts_param4(paramIndex, decorator) {
   return function(target, key) {
     decorator(target, key, paramIndex);
   };
 }
-__name(_ts_param3, "_ts_param");
+__name(_ts_param4, "_ts_param");
 var ViteInitializerService = class _ViteInitializerService {
   static {
     __name(this, "ViteInitializerService");
@@ -902,8 +1054,8 @@ var ViteInitializerService = class _ViteInitializerService {
 };
 ViteInitializerService = _ts_decorate5([
   Injectable(),
-  _ts_param3(2, Optional()),
-  _ts_param3(2, Inject("VITE_CONFIG")),
+  _ts_param4(2, Optional()),
+  _ts_param4(2, Inject("VITE_CONFIG")),
   _ts_metadata4("design:type", Function),
   _ts_metadata4("design:paramtypes", [
     typeof RenderService === "undefined" ? Object : RenderService,
@@ -996,6 +1148,20 @@ var RenderModule = class _RenderModule {
         useValue: config.defaultHead
       });
     }
+    if (config?.template) {
+      providers.push({
+        provide: "CUSTOM_TEMPLATE",
+        useValue: config.template
+      });
+    }
+    providers.push({
+      provide: "ALLOWED_HEADERS",
+      useValue: config?.allowedHeaders || []
+    });
+    providers.push({
+      provide: "ALLOWED_COOKIES",
+      useValue: config?.allowedCookies || []
+    });
     return {
       global: true,
       module: _RenderModule,
@@ -1088,6 +1254,30 @@ var RenderModule = class _RenderModule {
         inject: [
           "RENDER_CONFIG"
         ]
+      },
+      // Custom template provider - reads from config
+      {
+        provide: "CUSTOM_TEMPLATE",
+        useFactory: /* @__PURE__ */ __name((config) => config?.template, "useFactory"),
+        inject: [
+          "RENDER_CONFIG"
+        ]
+      },
+      // Allowed headers provider - reads from config
+      {
+        provide: "ALLOWED_HEADERS",
+        useFactory: /* @__PURE__ */ __name((config) => config?.allowedHeaders || [], "useFactory"),
+        inject: [
+          "RENDER_CONFIG"
+        ]
+      },
+      // Allowed cookies provider - reads from config
+      {
+        provide: "ALLOWED_COOKIES",
+        useFactory: /* @__PURE__ */ __name((config) => config?.allowedCookies || [], "useFactory"),
+        inject: [
+          "RENDER_CONFIG"
+        ]
       }
     ];
     return {

package/dist/templates/entry-client.tsx

@@ -1,6 +1,7 @@
 /// <reference path="../global.d.ts" />
 import React, { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
+import { PageContextProvider } from '../react/hooks/use-page-context';
 
 const componentName = window.__COMPONENT_NAME__;
 const initialProps = window.__INITIAL_STATE__ || {};
@@ -8,7 +9,8 @@ const renderContext = window.__CONTEXT__ || {};
 
 // Auto-import all view components using Vite's glob feature
 // @ts-ignore - Vite-specific API
-const modules: Record<string, { default: React.ComponentType<any> }> = import.meta.glob('@/views/**/*.tsx', { eager: true });
+const modules: Record<string, { default: React.ComponentType<any> }> =
+  import.meta.glob('@/views/**/*.tsx', { eager: true });
 
 // Build a map of components with their metadata
 // Filter out entry files and modules without default exports
@@ -26,7 +28,9 @@ const componentMap = Object.entries(modules)
     const component = module.default;
     const name = component.displayName || component.name;
     const filename = path.split('/').pop()?.replace('.tsx', '');
-    const normalizedFilename = filename ? filename.charAt(0).toUpperCase() + filename.slice(1) : undefined;
+    const normalizedFilename = filename
+      ? filename.charAt(0).toUpperCase() + filename.slice(1)
+      : undefined;
 
     return { path, component, name, filename, normalizedFilename };
   });
@@ -40,7 +44,10 @@ let ViewComponent: React.ComponentType<any> | undefined;
 
 // Try exact name match first
 ViewComponent = componentMap.find(
-  (c) => c.name === componentName || c.normalizedFilename === componentName || c.filename === componentName.toLowerCase()
+  (c) =>
+    c.name === componentName ||
+    c.normalizedFilename === componentName ||
+    c.filename === componentName.toLowerCase(),
 )?.component;
 
 // If no match found and component name looks like a generic/minified name (default, default_1, etc.)
@@ -56,7 +63,7 @@ if (!ViewComponent && /^default(_\d+)?$/.test(componentName)) {
 
     // Get all components with name "default" (anonymous functions), sorted by path for consistency
     const defaultComponents = componentMap
-      .filter(c => c.name === 'default')
+      .filter((c) => c.name === 'default')
       .sort((a, b) => a.path.localeCompare(b.path));
 
     // Try to match by index
@@ -67,17 +74,77 @@ if (!ViewComponent && /^default(_\d+)?$/.test(componentName)) {
 }
 
 if (!ViewComponent) {
-  const availableComponents = Object.entries(modules).map(([path, m]) => {
-    const filename = path.split('/').pop()?.replace('.tsx', '');
-    const name = m.default.displayName || m.default.name;
-    return `${filename} (${name})`;
-  }).join(', ');
-  throw new Error(`Component "${componentName}" not found in views directory. Available: ${availableComponents}`);
+  const availableComponents = Object.entries(modules)
+    .map(([path, m]) => {
+      const filename = path.split('/').pop()?.replace('.tsx', '');
+      const name = m.default.displayName || m.default.name;
+      return `${filename} (${name})`;
+    })
+    .join(', ');
+  throw new Error(
+    `Component "${componentName}" not found in views directory. Available: ${availableComponents}`,
+  );
+}
+
+/**
+ * Check if a component has a layout property
+ */
+function hasLayout(
+  component: any,
+): component is { layout: React.ComponentType<any>; layoutProps?: any } {
+  return component && typeof component.layout === 'function';
+}
+
+/**
+ * Compose a component with its layout (and nested layouts if any)
+ * This must match the server-side composition in entry-server.tsx
+ */
+function composeWithLayout(
+  ViewComponent: 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;
+  }
+
+  // Wrap the element with layouts from innermost to outermost
+  let result = element;
+  for (const { Layout, layoutProps } of layoutChain) {
+    result = <Layout layoutProps={layoutProps}>{result}</Layout>;
+  }
+
+  return result;
 }
 
+// Compose the component with its layout (if any)
+const composedElement = composeWithLayout(ViewComponent, initialProps);
+
+// Wrap with PageContextProvider to make context available via hooks
+const wrappedElement = (
+  <PageContextProvider context={renderContext}>
+    {composedElement}
+  </PageContextProvider>
+);
+
 hydrateRoot(
   document.getElementById('root')!,
-  <StrictMode>
-    <ViewComponent {...initialProps} context={renderContext} />
-  </StrictMode>,
+  <StrictMode>{wrappedElement}</StrictMode>,
 );

package/dist/templates/entry-server.tsx

@@ -1,10 +1,41 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
+import { PageContextProvider } from '../react/hooks/use-page-context';
+
+/**
+ * Compose a component with its layouts from the interceptor
+ * Layouts are passed from the RenderInterceptor based on decorators
+ */
+function composeWithLayouts(
+  ViewComponent: React.ComponentType<any>,
+  props: any,
+  layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [],
+): React.ReactElement {
+  // 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
+  for (const { layout: Layout, props: layoutProps } of layouts) {
+    result = <Layout layoutProps={layoutProps}>{result}</Layout>;
+  }
+
+  return result;
+}
 
 export function renderComponent(
   ViewComponent: React.ComponentType<any>,
   data: any,
 ) {
-  const { data: pageData, __context: context } = data;
-  return renderToString(<ViewComponent {...pageData} context={context} />);
+  const { data: pageData, __context: context, __layouts: layouts } = data;
+  const composedElement = composeWithLayouts(ViewComponent, pageData, layouts);
+
+  // Wrap with PageContextProvider to make context available via hooks
+  const wrappedElement = (
+    <PageContextProvider context={context}>
+      {composedElement}
+    </PageContextProvider>
+  );
+
+  return renderToString(wrappedElement);
 }

package/dist/templates/index.html

@@ -4,9 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NestJS React SSR</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <!--styles-->
   </head>
   <body>