catalyst-core 0.2.0-beta.3 → 0.3.0-beta.1

package/dist/server/renderer/extract.js

@@ -1,31 +1,149 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.cacheAndFetchAssets=void 0;var _path=_interopRequireDefault(require("path"));var _fs=_interopRequireDefault(require("fs"));var _otel=require("../../otel");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e};}// Use decimal megabytes (1 MB = 1,000,000 bytes) for all memory logs
-const BYTES_PER_MB=1_000_000;const toMB=bytes=>(bytes/BYTES_PER_MB).toFixed(2);const SSR_SERVICE=process.env.SERVICE_NAME||`pwa-${process.env.APPLICATION}-node-server-otel`;/**
- * Caches CSS file content (shared across all routes)
- * @param {string} assetName - CSS filename
- * @param {string} assetPath - Full path to CSS file
- */function cacheCSS(assetName,assetPath){if(!process.cssCache){process.cssCache={};}if(!process.cssCache[assetName]){const css=_fs.default.readFileSync(assetPath);process.cssCache[assetName]=css;const cssCacheSize=Object.keys(process.cssCache).length;const cssCacheTotalSizeBytes=Object.values(process.cssCache).reduce((total,cssContent)=>total+Buffer.byteLength(cssContent),0);const memoryUsage=process.memoryUsage();const availableMemoryBytes=(memoryUsage?.heapTotal??0)-(memoryUsage?.heapUsed??0);logger.info(`Last Cached CSS - Asset: ${assetName}, `+`CSS Cache Entries: ${cssCacheSize}, `+`CSS Cache Total Size: ${toMB(cssCacheTotalSizeBytes)} MB, `+`RSS: ${toMB(memoryUsage?.rss??0)} MB, `+`Heap Total: ${toMB(memoryUsage?.heapTotal??0)} MB, `+`Heap Used: ${toMB(memoryUsage?.heapUsed??0)} MB, `+`External: ${toMB(memoryUsage?.external??0)} MB, `+`Array Buffers: ${toMB(memoryUsage?.arrayBuffers??0)} MB, `+`Available Memory: ${toMB(availableMemoryBytes)} MB, `+`Timestamp: ${new Date().toISOString()}`);}return process.cssCache[assetName];}/**
- * Extracts CSS and preload links from cached ChunkExtractor
- * @param {string} routePath - Route path
- * @returns {object} { css: string, preloadJSLinks: array } or null if not cached
- */function getAssetsFromCachedExtractor(routePath){const isProd=process.env.NODE_ENV==="production";// Only use cached extractor in production
-if(!isProd||!process.extractorCache||!process.extractorCache[routePath]){return null;}const extractor=process.extractorCache[routePath];const linkElements=extractor.getLinkElements({fetchpriority:"low"});// Extractor hasn't run renderToString yet — no chunks collected
-if(!linkElements||linkElements.length===0){return null;}const preloadJSLinks=linkElements.filter(asset=>asset?.props?.as==="script");const cssAssets=linkElements.filter(e=>{const href=e?.props?.href;return href&&href.endsWith(".css");});// Build inline CSS from cached CSS files
-const cssContents=[];for(const cssElement of cssAssets){const assetName=_path.default.basename(cssElement.props.href);// Check if CSS content is cached
-if(process.cssCache&&process.cssCache[assetName]){cssContents.push(process.cssCache[assetName]);}else{// CSS file not in cache yet — fall back to full render path
-return null;}}const cachedCss=cssContents.join("");return{css:cachedCss,preloadJSLinks:preloadJSLinks};}/**
- * Builds inline CSS from link elements by reading and caching CSS files
- * @param {array} linkElements - Link elements from ChunkExtractor
- * @returns {string} Concatenated CSS content
- */function buildInlineCSS(linkElements){if(!Array.isArray(linkElements)||linkElements.length===0){return"";}const cssContents=[];for(const element of linkElements){const href=element?.props?.href;if(href&&href.endsWith(".css")){const assetName=_path.default.basename(href);const assetPath=_path.default.resolve(process.env.src_path,`${process.env.BUILD_OUTPUT_PATH}/public`,assetName// nosemgrep: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal - assetName is reduced to a basename and CSS is read from the build output directory.
-);// Read and cache CSS content
-const cssContent=cacheCSS(assetName,assetPath);cssContents.push(cssContent);}}return cssContents.join("");}/**
- * Phase 2: called from renderMarkUp's onAllReady after renderToPipeableStream finishes.
- * Builds the inline CSS (<style> block) and script tags that are appended to the stream.
- * In production, CSS is inlined from disk-cached files; in dev, style tags are used directly.
- * Bots receive no JS — only the fully rendered HTML is needed for crawling.
- */const cacheAndFetchAssets=exports.cacheAndFetchAssets=(0,_otel.withSyncObservability)(SSR_SERVICE,function cacheAndFetchAssets({webExtractor,res,isBot}){let firstFoldCss="";let firstFoldJS="";const isProd=process.env.NODE_ENV==="production";const{routePath}=res.locals;const linkElements=webExtractor.getLinkElements({fetchpriority:"low"});if(routePath){if(isProd){firstFoldCss=buildInlineCSS(linkElements);if(firstFoldCss?.length)firstFoldCss=`<style>${firstFoldCss}</style>`;}else{firstFoldCss=webExtractor.getStyleTags();}firstFoldJS=!isBot?webExtractor.getScriptTags({fetchpriority:"low"}):"";}return{firstFoldCss,firstFoldJS};},"cacheAndFetchAssets");/**
- * Checks if we have cached assets for this route
- * Called during Phase 1 to determine if we can skip renderToString
- * @param {object} res - Response object
- * @param {object} route - Route configuration
- */var _default=exports.default=(0,_otel.withSyncObservability)(SSR_SERVICE,function extractAssets(res,route){try{const routePath=route.path;const cached=getAssetsFromCachedExtractor(routePath);if(cached&&(cached.css||cached.preloadJSLinks)){res.locals.pageCss=cached.css;res.locals.preloadJSLinks=cached.preloadJSLinks;return;}logger.info({message:"Cache Missed",uri:routePath});}catch(error){logger.error("Error in extracting assets:"+error);}},"extractAssets");
+import React from "react"
+import path from "path"
+import fs from "fs"
+
+// ── CSS: read from disk and inline as <style> ──────────────────────────
+
+// Process-level cache — survives across requests, reset on deploy.
+if (!process.cssFileCache) process.cssFileCache = {}
+
+// Per-route deferred asset paths/URLs learned from past SSRs — inlined in <head> on later visits
+// so late <style> after </body> does not re-layout already-painted content. CSS file bodies use
+// process.cssFileCache inside readCssFromDisk (no repeat disk read).
+if (!process.deferredAssetsByRoute) process.deferredAssetsByRoute = new Map()
+
+const routeRecord = (routeKey) => {
+    let rec = process.deferredAssetsByRoute.get(routeKey)
+    if (!rec) {
+        rec = { css: new Set(), js: new Set() }
+        process.deferredAssetsByRoute.set(routeKey, rec)
+    }
+    return rec
+}
+
+/** Stable key for caching deferred chunks — uses the matched route pattern (e.g. "/product/:name/:id")
+ *  so all pages on the same route share one entry regardless of their actual URL parameters. */
+export const getDeferredRouteKey = (req, allMatches = []) => {
+    return allMatches?.length ? (allMatches[allMatches.length - 1]?.route?.path ?? null) : null
+}
+
+/** CSS paths (manifest-relative) previously deferred on this route — for <head> inlining. */
+export const getCachedDeferredCssPathsForRoute = (routeKey) => {
+    if (!routeKey) return []
+    const rec = process.deferredAssetsByRoute.get(routeKey)
+    return rec ? [...rec.css] : []
+}
+
+/**
+ * Record deferred asset paths/URLs for this route. Returns CSS paths not yet on the route so they
+ * can be inlined after </body> only once; on later visits those paths are inlined in <head> instead.
+ * JS URLs are always emitted in HTML on every navigation — skipping "cached" scripts would omit modules.
+ * @returns {{ newCssPaths: string[] }}
+ */
+export const registerDeferredAssetsForRoute = (routeKey, { css = [], js = [] } = {}, isBot = false) => {
+    if (!routeKey) return { newCssPaths: [] }
+    const rec = routeRecord(routeKey)
+    const newCssPaths = []
+    for (const p of css) {
+        if (!p) continue
+        if (!rec.css.has(p)) newCssPaths.push(p)
+        rec.css.add(p)
+    }
+    if (!isBot) {
+        for (const url of js) {
+            if (url) rec.js.add(url)
+        }
+    }
+    return { newCssPaths }
+}
+
+/**
+ * Cached deferred script URLs for this route, excluding URLs already loaded as critical scripts.
+ * @param {string|null} routeKey - Matched route pattern.
+ * @param {Iterable<string>} excludeUrls - Critical / head script src URLs.
+ * @returns {string[]}
+ */
+export const getDeferredPreloadScriptUrls = (routeKey, excludeUrls = []) => {
+    if (!routeKey) return []
+    const rec = process.deferredAssetsByRoute.get(routeKey)
+    if (!rec) return []
+    const exclude = new Set(excludeUrls)
+    return [...rec.js].filter((url) => url && !exclude.has(url))
+}
+
+/**
+ * React <link rel="modulepreload"> elements (deduped). Use before matching <script type="module">.
+ * @param {string[]} jsUrls
+ * @param {string} [keyPrefix] - Unique prefix for React keys when rendering multiple lists.
+ */
+export const generateModulePreloadLinkElements = (jsUrls = [], keyPrefix = "modulepreload") =>
+    [...new Set(jsUrls)].map((url, i) =>
+        React.createElement("link", {
+            key: `${keyPrefix}-${i}`,
+            rel: "modulepreload",
+            href: url,
+            fetchPriority: "high",
+        })
+    )
+
+/**
+ * Read CSS files from disk and return concatenated CSS string for inlining.
+ * @param {string[]} cssPaths - Relative CSS paths (from manifest).
+ * @param {string} basePath  - Build output directory on disk.
+ * @returns {string} Concatenated CSS content.
+ */
+export const readCssFromDisk = (cssPaths = [], basePath) => {
+    if (!cssPaths.length) return ""
+
+    const seen = new Set()
+    const chunks = []
+
+    for (const asset of cssPaths) {
+        if (!asset || seen.has(asset)) continue
+        seen.add(asset)
+        if (asset.startsWith("http")) continue
+
+        const filePath = path.isAbsolute(asset) ? asset : path.join(basePath, asset.replace(/^\/+/, ""))
+
+        try {
+            if (!process.cssFileCache[filePath]) {
+                process.cssFileCache[filePath] = fs.readFileSync(filePath, "utf8")
+            }
+            if (process.cssFileCache[filePath]) {
+                chunks.push(process.cssFileCache[filePath])
+            }
+        } catch {
+            // Silently skip unreadable assets in production
+        }
+    }
+
+    return chunks.join("\n")
+}
+
+// ── React elements (for SSR rendering inside <Head>) ───────────────────
+
+/**
+ * <script type="module"> React elements for JS assets.
+ */
+export const generateScriptElements = (jsUrls = []) =>
+    [...new Set(jsUrls)].map((url, i) =>
+        React.createElement("script", { key: `js-${i}`, type: "module", src: url })
+    )
+
+// ── HTML strings (for streaming injection after body via res.write) ────
+
+/**
+ * <link rel="stylesheet"> HTML strings for deferred CSS (non-blocking, after body).
+ */
+export const generateCssLinkStrings = (cssUrls = []) =>
+    [...new Set(cssUrls)].map((url) => `<link rel="stylesheet" href="${url}">`).join("")
+
+/**
+ * <link rel="modulepreload"> + <script type="module"> HTML strings.
+ */
+export const generateScriptStrings = (jsUrls = []) =>
+    [...new Set(jsUrls)]
+        .map((url) => {
+            return `<script type="module" src="${url}"></script>`
+        })
+        .join("")

package/dist/server/renderer/handler.jsx

@@ -0,0 +1,433 @@
+import React from "react"
+import { renderStart, renderEnd } from "./render.js"
+import { Provider } from "react-redux"
+import { Body } from "./document/Body.jsx"
+import { Head } from "./document/Head.jsx"
+
+import { StaticRouter } from "react-router-dom/server"
+import ServerRouter from "../../router/ServerRouter.js"
+import { renderToPipeableStream } from "react-dom/server"
+import { getUserAgentDetails } from "../utils/userAgentUtil.js"
+import { serverDataFetcher, matchRoutes as NestedMatchRoutes, getMetaData } from "../../index.jsx"
+import { validateConfigureStore, validateGetRoutes, safeCall } from "../utils/validator.js"
+import { ChunkExtractor } from "./ChunkExtractor.js"
+import {
+    readCssFromDisk,
+    generateScriptElements,
+    generateCssLinkStrings,
+    generateScriptStrings,
+    getDeferredRouteKey,
+    getCachedDeferredCssPathsForRoute,
+    registerDeferredAssetsForRoute,
+    getDeferredPreloadScriptUrls,
+    generateModulePreloadLinkElements,
+} from "./extract.js"
+import path from "path"
+
+import CustomDocument from "@catalyst/template/server/document"
+
+import App from "@catalyst/template/src/js/containers/App/index"
+import { getRoutes } from "@catalyst/template/src/js/routes/utils"
+import createStore from "@catalyst/template/src/js/store/index.js"
+import { SsrRequestProvider } from "../../web-router/components/SsrRequestContext.jsx"
+import { getManifest, getAssetManifest } from "../manifestCache.js"
+
+const DEFAULT_SAFE_AREA_INSETS = { top: 0, right: 0, bottom: 0, left: 0 }
+
+const parseSafeAreaFromHeaders = (req) => {
+    const readEdge = (header) => {
+        const raw = req.get(header) ?? req.headers[header.toLowerCase()]
+        const value = Number(raw)
+        return Number.isFinite(value) && value >= 0 ? value : null
+    }
+
+    const top = readEdge("X-Safe-Area-Top")
+    const right = readEdge("X-Safe-Area-Right")
+    const bottom = readEdge("X-Safe-Area-Bottom")
+    const left = readEdge("X-Safe-Area-Left")
+
+    if (![top, right, bottom, left].some((value) => value !== null)) return null
+
+    return {
+        top: top ?? 0,
+        right: right ?? 0,
+        bottom: bottom ?? 0,
+        left: left ?? 0,
+    }
+}
+
+// Routes are static for the lifetime of the server — resolve once and reuse
+// the same instance per request to avoid per-request allocation.
+let _cachedRoutes
+const getCachedRoutes = () => {
+    if (_cachedRoutes === undefined) {
+        _cachedRoutes = validateGetRoutes(getRoutes) ? getRoutes() : null
+    }
+    return _cachedRoutes
+}
+
+// Try to import user-defined hooks. These are optional — apps that don't export them
+// will get undefined, and safeCall is a no-op for non-functions.
+let _onRouteMatch,
+    _onFetcherSuccess,
+    _onFetcherError,
+    _onAppServerSideSuccess,
+    _onAppServerSideError,
+    _onRenderError,
+    _onRequestError
+try {
+    const hooks = await import("@catalyst/template/server/index.js")
+    _onRouteMatch = hooks.onRouteMatch
+    _onFetcherSuccess = hooks.onFetcherSuccess
+    _onFetcherError = hooks.onFetcherError
+    _onAppServerSideSuccess = hooks.onAppServerSideSuccess
+    _onAppServerSideError = hooks.onAppServerSideError
+    _onRenderError = hooks.onRenderError
+    _onRequestError = hooks.onRequestError
+} catch {
+    // No hooks file — all hooks remain undefined, safeCall will skip them
+}
+
+// Passthrough no-ops used when OTEL_ENABLE is not set; replaced below if enabled.
+let withObservability = (_service, fn) => fn
+let withSyncObservability = (_service, fn) => fn
+
+if (process.env.OTEL_ENABLE === true) {
+    try {
+        const otel = await import("../../otel.js")
+        withObservability = otel.withObservability
+        withSyncObservability = otel.withSyncObservability
+    } catch {
+        // otel packages not installed — continue without tracing
+    }
+}
+
+const SSR_SERVICE = process.env.SERVICE_NAME || `pwa-${process.env.APPLICATION}-node-server`
+
+const traceHook = (fn, spanName) =>
+    typeof fn === "function" ? withSyncObservability(SSR_SERVICE, fn, spanName) : fn
+
+const onRouteMatch = traceHook(_onRouteMatch, "onRouteMatch")
+const onFetcherSuccess = traceHook(_onFetcherSuccess, "onFetcherSuccess")
+const onFetcherError = traceHook(_onFetcherError, "onFetcherError")
+const onAppServerSideSuccess = traceHook(_onAppServerSideSuccess, "onAppServerSideSuccess")
+const onAppServerSideError = traceHook(_onAppServerSideError, "onAppServerSideError")
+const onRenderError = traceHook(_onRenderError, "onRenderError")
+const onRequestError = traceHook(_onRequestError, "onRequestError")
+
+// ── Asset collection ───────────────────────────────────────────────────
+const _collectAssets = (req, allMatches) => {
+    const chunkExtractor = new ChunkExtractor({
+        manifest: getManifest() || {},
+        assetManifest: getAssetManifest() || {},
+    })
+
+    // Add route-matched CSS/JS to critical bucket (loaded in <head>)
+    chunkExtractor.preloadRouteCss(allMatches)
+
+    return chunkExtractor
+}
+
+const collectAssets = withSyncObservability(SSR_SERVICE, _collectAssets, "collectAssets")
+
+// ── JSX tree ───────────────────────────────────────────────────────────
+const getComponent = (store, context, req, fetcherData, isBot) => (
+    <div id="app">
+        <SsrRequestProvider value={{ isBot }}>
+            <Provider store={store}>
+                <StaticRouter context={context} location={req.originalUrl}>
+                    <ServerRouter store={store} intialData={fetcherData} />
+                </StaticRouter>
+            </Provider>
+        </SsrRequestProvider>
+    </div>
+)
+
+// ── Render and stream ──────────────────────────────────────────────────
+const _renderMarkUp = async (
+    errorCode,
+    req,
+    res,
+    metaTags,
+    fetcherData,
+    store,
+    allMatches,
+    context,
+    chunkExtractor
+) => {
+    const deviceDetails = getUserAgentDetails(req.headers["user-agent"] || "")
+    // Match mweb's wider definition: synthetic monitors (StatusCake) and AI crawlers
+    // also need the bot code path — no JS, and split(... ssr: false ...) widgets that
+    // previously read state.shellReducer.isBot now read this via SsrRequestContext.
+    const isBot = !!(deviceDetails.googleBot || deviceDetails.aiBot || deviceDetails.statusCakeBot)
+    const safeArea = parseSafeAreaFromHeaders(req) || { ...DEFAULT_SAFE_AREA_INSETS }
+    const previousSafeArea = globalThis.__SAFE_AREA_INITIAL__
+    globalThis.__SAFE_AREA_INITIAL__ = safeArea
+
+    const cleanupSafeArea = () => {
+        if (previousSafeArea === undefined) {
+            delete globalThis.__SAFE_AREA_INITIAL__
+        } else {
+            globalThis.__SAFE_AREA_INITIAL__ = previousSafeArea
+        }
+    }
+
+    // Critical assets → <head>
+    const criticalAssets = chunkExtractor ? chunkExtractor.getCriticalAssets() : { js: [], css: [] }
+
+    // Inline critical CSS from disk (small thanks to natural code-splitting)
+    const buildDir = path.join(process.env.src_path, process.env.BUILD_OUTPUT_PATH || "build")
+    const inlineCss = readCssFromDisk(criticalAssets.css, buildDir)
+
+    const deferredRouteKey = getDeferredRouteKey(req, allMatches)
+    const deferredRouteInlineCss = readCssFromDisk(
+        getCachedDeferredCssPathsForRoute(deferredRouteKey),
+        buildDir
+    )
+
+    const jsScripts = generateScriptElements(criticalAssets.js)
+    const criticalPreloadLinks = generateModulePreloadLinkElements(criticalAssets.js, "critical-js")
+    const deferredPreloadUrls = getDeferredPreloadScriptUrls(deferredRouteKey, criticalAssets.js)
+    const deferredPreloadLinks = generateModulePreloadLinkElements(deferredPreloadUrls, "deferred-js")
+
+    // Build Head props
+    const shellStart = renderStart({
+        inlineCss,
+        deferredRouteInlineCss,
+        jsScripts,
+        criticalPreloadLinks,
+        deferredPreloadLinks,
+        metaTags,
+        isBot,
+        fetcherData,
+    })
+
+    const state = store.getState()
+    const jsx = getComponent(store, context, req, fetcherData, isBot)
+    const shellEnd = renderEnd(state, res, jsx, errorCode, fetcherData)
+
+    const finalProps = { ...shellStart, ...shellEnd, jsx, req, res, safeArea }
+
+    const CompleteDocument = () => {
+        if (CustomDocument) {
+            return CustomDocument(finalProps)
+        }
+        return (
+            <html lang={finalProps.lang}>
+                <Head
+                    isBot={finalProps.isBot}
+                    inlineCss={finalProps.inlineCss}
+                    deferredRouteInlineCss={finalProps.deferredRouteInlineCss}
+                    jsScripts={finalProps.jsScripts}
+                    criticalPreloadLinks={finalProps.criticalPreloadLinks}
+                    deferredPreloadLinks={finalProps.deferredPreloadLinks}
+                    fetcherData={finalProps.fetcherData}
+                    metaTags={finalProps.metaTags}
+                    publicAssetPath={finalProps.publicAssetPath}
+                />
+                <Body
+                    initialState={finalProps.initialState}
+                    jsx={finalProps.jsx}
+                    statusCode={finalProps.statusCode}
+                    fetcherData={finalProps.fetcherData}
+                    safeArea={finalProps.safeArea}
+                />
+            </html>
+        )
+    }
+
+    try {
+        const status = errorCode || (allMatches.length && allMatches[0]?.route?.path === "*" ? 404 : 200)
+        res.set({ "content-type": "text/html; charset=utf-8" })
+        res.status(status)
+
+        return new Promise((resolve, reject) => {
+            const { pipe } = renderToPipeableStream(<CompleteDocument />, {
+                onShellReady() {
+                    res.setHeader("content-type", "text/html")
+                    pipe(res)
+                },
+
+                onAllReady() {
+                    // Deferred assets — injected after body (non-blocking)
+                    const deferredAssets = chunkExtractor
+                        ? chunkExtractor.getDeferredAssets()
+                        : { js: [], css: [] }
+
+                    // Tell client which components were SSR'd so split() can
+                    // eagerly import them (prevents Suspense fallback flash)
+                    res.write(`<script>window.__CATALYST_IS_BOT__=${isBot ? "true" : "false"};</script>`)
+                    if (chunkExtractor) {
+                        const renderedKeys = chunkExtractor.getRenderedComponentKeys()
+                        res.write(
+                            `<script>window.__SSR_RENDERED_COMPONENTS__=new Set(${JSON.stringify(renderedKeys)})</script>`
+                        )
+                    }
+
+                    const { newCssPaths } = registerDeferredAssetsForRoute(
+                        deferredRouteKey,
+                        deferredAssets,
+                        isBot
+                    )
+                    if (newCssPaths.length) {
+                        res.write(`<style>${readCssFromDisk(newCssPaths, buildDir)}</style>`)
+                    }
+                    if (!isBot) {
+                        res.write(generateScriptStrings(deferredAssets.js))
+                    }
+
+                    res.end()
+                    cleanupSafeArea()
+                    resolve()
+                },
+
+                onError(error) {
+                    console.error("Error in renderToPipeableStream:", error)
+                    safeCall(onRenderError, { req, res, store, error })
+                    cleanupSafeArea()
+                    reject(error)
+                },
+            })
+        })
+    } catch (error) {
+        cleanupSafeArea()
+        console.error("Error in rendering document on server:", error)
+        safeCall(onRenderError, { req, res, store, error })
+        return Promise.reject(error)
+    }
+}
+
+const tracedRenderMarkUp = withObservability(SSR_SERVICE, _renderMarkUp, "renderMarkUp")
+const tracedAppServerSideFunction = withObservability(
+    SSR_SERVICE,
+    (args) => App.serverSideFunction(args),
+    "App.serverSideFunction"
+)
+const tracedServerDataFetcher = withObservability(SSR_SERVICE, serverDataFetcher, "serverDataFetcher")
+const tracedGetMetaData = withSyncObservability(SSR_SERVICE, getMetaData, "getMetaData")
+
+// ── Express middleware ──────────────────────────────────────────────────
+/**
+ * SSR request handler. Execution pipeline per request:
+ *   1. Match route → collect assets
+ *   2. App.serverSideFunction (app-level server hook)
+ *   3. serverDataFetcher (route-level data fetching)
+ *   4. renderMarkUp → renderToPipeableStream (stream to client)
+ *
+ * res.headersSent is checked after each async step: if a user hook
+ * (onRouteMatch, onFetcherSuccess, etc.) has already sent a response
+ * (e.g. a redirect), we bail out early without attempting another render.
+ */
+async function _handler(req, res) {
+    try {
+        let context = {}
+        let fetcherData = {}
+        const store = validateConfigureStore(createStore) ? await createStore({}, req, res) : null
+
+        const cachedRoutes = getCachedRoutes()
+        const allMatches = cachedRoutes ? NestedMatchRoutes(cachedRoutes, req.originalUrl) || [] : []
+        let allTags = []
+
+        safeCall(onRouteMatch, { req, res, matches: allMatches, store })
+
+        if (res.headersSent) return
+
+        try {
+            await tracedAppServerSideFunction({ store, req, res })
+            safeCall(onAppServerSideSuccess, { req, res, store })
+
+            if (res.headersSent) return
+
+            try {
+                fetcherData = await tracedServerDataFetcher(
+                    { routes: cachedRoutes, req, res, url: req.originalUrl },
+                    { store }
+                )
+
+                if (res.headersSent) return
+
+                const err = fetcherData?.[req.originalUrl]?.error
+                allTags = tracedGetMetaData(allMatches, fetcherData)
+                const chunkExtractor = collectAssets(req, allMatches)
+
+                if (err) {
+                    safeCall(onFetcherError, { req, res, store, error: err })
+
+                    if (res.headersSent) return
+
+                    const statusCode = err.status_code || 404
+                    await tracedRenderMarkUp(
+                        statusCode,
+                        req,
+                        res,
+                        allTags,
+                        fetcherData,
+                        store,
+                        allMatches,
+                        context,
+                        chunkExtractor
+                    )
+                } else {
+                    safeCall(onFetcherSuccess, { req, res, store })
+
+                    if (res.headersSent) return
+
+                    await tracedRenderMarkUp(
+                        null,
+                        req,
+                        res,
+                        allTags,
+                        fetcherData,
+                        store,
+                        allMatches,
+                        context,
+                        chunkExtractor
+                    )
+                }
+            } catch (error) {
+                console.error("Error in executing serverFetcher functions:", error)
+                safeCall(onFetcherError, { req, res, store, error })
+
+                if (res.headersSent) return
+
+                const chunkExtractor = collectAssets(req, allMatches)
+                await tracedRenderMarkUp(
+                    404,
+                    req,
+                    res,
+                    allTags,
+                    fetcherData,
+                    store,
+                    allMatches,
+                    context,
+                    chunkExtractor
+                )
+            }
+        } catch (error) {
+            console.error("Error in executing serverSideFunction inside App:", error)
+            safeCall(onAppServerSideError, { req, res, store, error })
+
+            if (res.headersSent) return
+
+            const chunkExtractor = collectAssets(req, allMatches)
+            await tracedRenderMarkUp(
+                error.status_code,
+                req,
+                res,
+                allTags,
+                fetcherData,
+                store,
+                allMatches,
+                context,
+                chunkExtractor
+            )
+        }
+    } catch (error) {
+        console.error("Error in handling document request:", error)
+        safeCall(onRequestError, { req, res, error })
+    }
+}
+
+const handler = withObservability(SSR_SERVICE, _handler, "handler")
+
+export default handler

package/dist/server/renderer/index.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _express=_interopRequireDefault(require("express"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e};}const router=_express.default.Router();router.use(function rendererMiddleware(req,res,next){let handler=require("./handler").default;if(res.locals.rendererWrapper){logger.debug({message:"Handler wrapped"});res.locals.rendererWrapper(handler)(req,res,next);}else{handler(req,res,next);}});var _default=exports.default=router;
+import express from "express"
+import handler from "./handler.jsx"
+
+const router = express.Router()
+
+router.use(handler)
+
+export default router

package/dist/server/renderer/render.js

@@ -0,0 +1,47 @@
+/**
+ * Returns data used by the Head component for page rendering.
+ */
+export const renderStart = ({
+    inlineCss,
+    deferredRouteInlineCss,
+    jsScripts,
+    criticalPreloadLinks,
+    deferredPreloadLinks,
+    metaTags,
+    isBot,
+    fetcherData,
+}) => {
+    const { IS_DEV_COMMAND, WEBPACK_DEV_SERVER_HOSTNAME, WEBPACK_DEV_SERVER_PORT } = process.env
+
+    let publicAssetPath = `${process.env.PUBLIC_STATIC_ASSET_URL}${process.env.PUBLIC_STATIC_ASSET_PATH}`
+
+    if (JSON.parse(IS_DEV_COMMAND)) {
+        publicAssetPath = `http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}/assets/`
+    }
+
+    return {
+        inlineCss,
+        deferredRouteInlineCss,
+        jsScripts,
+        criticalPreloadLinks,
+        deferredPreloadLinks,
+        metaTags,
+        isBot,
+        publicAssetPath,
+        fetcherData,
+    }
+}
+
+/**
+ * Returns data used by the Body component for page rendering.
+ */
+export const renderEnd = (initialState = {}, res, jsx, errorCode, fetcherData) => {
+    return {
+        initialState,
+        firstFoldCss: "",
+        firstFoldJS: "",
+        jsx,
+        errorCode,
+        fetcherData,
+    }
+}