hadars 0.1.17 → 0.1.19

package/src/slim-react/renderContext.ts

@@ -0,0 +1,105 @@
+/**
+ * Render-time context for tree-position-based `useId`.
+ *
+ * State lives on `globalThis` rather than module-level variables so that
+ * multiple slim-react instances (the render worker's direct import and the
+ * SSR bundle's bundled copy) share the same context without any coordination.
+ * Safe because each worker processes one render at a time; `resetRenderState`
+ * is always called at the top of every `renderToString` / `renderToStream`.
+ */
+
+export interface TreeContext {
+  id: number;
+  overflow: string;
+  bits: number;
+}
+
+interface RenderState {
+  currentTreeContext: TreeContext;
+  localIdCounter: number;
+  idPrefix: string;
+}
+
+const GLOBAL_KEY = "__slimReactRenderState";
+const EMPTY: TreeContext = { id: 0, overflow: "", bits: 0 };
+
+function s(): RenderState {
+  const g = globalThis as any;
+  if (!g[GLOBAL_KEY]) {
+    g[GLOBAL_KEY] = { currentTreeContext: { ...EMPTY }, localIdCounter: 0, idPrefix: "" };
+  }
+  return g[GLOBAL_KEY] as RenderState;
+}
+
+export function resetRenderState() {
+  const st = s();
+  st.currentTreeContext = { ...EMPTY };
+  st.localIdCounter = 0;
+}
+
+export function setIdPrefix(prefix: string) {
+  s().idPrefix = prefix;
+}
+
+export function pushTreeContext(totalChildren: number, index: number): TreeContext {
+  const st = s();
+  const saved: TreeContext = { ...st.currentTreeContext };
+  const pendingBits = 32 - Math.clz32(totalChildren);
+  const slot = index + 1;
+  const totalBits = st.currentTreeContext.bits + pendingBits;
+
+  if (totalBits <= 30) {
+    st.currentTreeContext = {
+      id: (st.currentTreeContext.id << pendingBits) | slot,
+      overflow: st.currentTreeContext.overflow,
+      bits: totalBits,
+    };
+  } else {
+    let newOverflow = st.currentTreeContext.overflow;
+    if (st.currentTreeContext.bits > 0) newOverflow += st.currentTreeContext.id.toString(32);
+    st.currentTreeContext = { id: (1 << pendingBits) | slot, overflow: newOverflow, bits: pendingBits };
+  }
+  return saved;
+}
+
+export function popTreeContext(saved: TreeContext) {
+  s().currentTreeContext = saved;
+}
+
+export function pushComponentScope(): number {
+  const st = s();
+  const saved = st.localIdCounter;
+  st.localIdCounter = 0;
+  return saved;
+}
+
+export function popComponentScope(saved: number) {
+  s().localIdCounter = saved;
+}
+
+export function snapshotContext(): { tree: TreeContext; localId: number } {
+  const st = s();
+  return { tree: { ...st.currentTreeContext }, localId: st.localIdCounter };
+}
+
+export function restoreContext(snap: { tree: TreeContext; localId: number }) {
+  const st = s();
+  st.currentTreeContext = { ...snap.tree };
+  st.localIdCounter = snap.localId;
+}
+
+function getTreeId(): string {
+  const { id, overflow, bits } = s().currentTreeContext;
+  return bits > 0 ? overflow + id.toString(32) : overflow;
+}
+
+export function makeId(): string {
+  const st = s();
+  const treeId = getTreeId();
+  const n = st.localIdCounter++;
+  let id = ":" + st.idPrefix + "R";
+  if (treeId.length > 0) id += treeId;
+  id += ":";
+  if (n > 0) id += "H" + n.toString(32) + ":";
+  return id;
+}

package/src/slim-react/types.ts

@@ -0,0 +1,33 @@
+// ---- Symbols ----
+// Use the same symbols as React so elements produced here are wire-compatible
+// with elements produced by the real React JSX runtime (e.g. when a library
+// uses React.createElement directly).  This means the SSR bundle can be aliased
+// to slim-react without any element shape mismatch.
+//
+// React 19 introduced "react.transitional.element" as the canonical $$typeof for
+// elements created by createElement / the jsx-runtime.  We keep the old
+// "react.element" as slim-react's own emission symbol (unchanged wire format for
+// SSR HTML — it makes no difference) and accept both in the renderer.
+export const SLIM_ELEMENT   = Symbol.for("react.element");
+export const REACT19_ELEMENT = Symbol.for("react.transitional.element");
+export const FRAGMENT_TYPE  = Symbol.for("react.fragment");
+export const SUSPENSE_TYPE  = Symbol.for("react.suspense");
+
+// ---- Types ----
+export type ComponentFunction = (props: any) => SlimNode;
+
+export type SlimElement = {
+  $$typeof: typeof SLIM_ELEMENT;
+  type: string | ComponentFunction | symbol;
+  props: Record<string, any>;
+  key: string | number | null;
+};
+
+export type SlimNode =
+  | SlimElement
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | SlimNode[];

package/src/ssr-render-worker.ts

@@ -1,53 +1,27 @@
 /**
  * SSR render worker — runs in a node:worker_threads thread.
  *
- * Handles one message type sent by RenderWorkerPool in build.ts:
+ * Uses slim-react (bundled with hadars) for rendering instead of react-dom/server.
+ * The SSR bundle is compiled with `react` aliased to slim-react, so both the
+ * worker and the bundle share the same slim-react instance (and its globalThis
+ * render state) without any extra coordination.
  *
- *   { type: 'renderFull', id, request: SerializableRequest }
- *     → runs full lifecycle (getInitProps → render loop → getAfterRenderProps → getFinalProps)
- *     → renderToString(ReactPage)
- *     → postMessage({ id, html, headHtml, status })
- *
- * The SSR bundle path is passed once via workerData at thread creation time so
- * the SSR module is only imported once per worker lifetime.
+ * Message: { type: 'renderFull', id, request: SerializableRequest }
+ * Reply:   { id, html, headHtml, status }  |  { id, error }
  */
 
 import { workerData, parentPort } from 'node:worker_threads';
-import { createRequire } from 'node:module';
-import pathMod from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { processSegmentCache } from './utils/segmentCache';
+import { renderToString, createElement, Fragment } from './slim-react/index';
 
 const { ssrBundlePath } = workerData as { ssrBundlePath: string };
 
-// Lazy-loaded singletons resolved from the *project's* node_modules so the
-// same React instance is shared with the SSR bundle (prevents invalid hook calls).
-let _React: any = null;
-let _renderToStaticMarkup: ((element: any) => string) | null = null;
-let _renderToString: ((element: any) => string) | null = null;
-// Full SSR module — includes default (App component) + lifecycle exports.
 let _ssrMod: any = null;
 
 async function init() {
-    if (_React && _ssrMod) return;
-
-    const req = createRequire(pathMod.resolve(process.cwd(), '__hadars_fake__.js'));
-
-    if (!_React) {
-        const reactPath = pathToFileURL(req.resolve('react')).href;
-        const reactMod = await import(reactPath);
-        _React = reactMod.default ?? reactMod;
-    }
-
-    if (!_renderToString || !_renderToStaticMarkup) {
-        const serverPath = pathToFileURL(req.resolve('react-dom/server')).href;
-        const serverMod = await import(serverPath);
-        _renderToString = serverMod.renderToString;
-        _renderToStaticMarkup = serverMod.renderToStaticMarkup;
-    }
-
-    if (!_ssrMod) {
-        _ssrMod = await import(pathToFileURL(ssrBundlePath).href);
-    }
+    if (_ssrMod) return;
+    _ssrMod = await import(pathToFileURL(ssrBundlePath).href);
 }
 
 export type SerializableRequest = {
@@ -65,61 +39,57 @@ function deserializeRequest(s: SerializableRequest): any {
     const init: RequestInit = { method: s.method, headers: new Headers(s.headers) };
     if (s.body) init.body = s.body.buffer as ArrayBuffer;
     const req = new Request(s.url, init);
-    Object.assign(req, {
-        pathname: s.pathname,
-        search: s.search,
-        location: s.location,
-        cookies: s.cookies,
-    });
+    Object.assign(req, { pathname: s.pathname, search: s.search, location: s.location, cookies: s.cookies });
     return req;
 }
 
-function buildHeadHtml(head: any): string {
-    const R = _React;
-    const metaEntries = Object.entries(head.meta ?? {});
-    const linkEntries = Object.entries(head.link ?? {});
-    const styleEntries = Object.entries(head.style ?? {});
-    const scriptEntries = Object.entries(head.script ?? {});
-    return _renderToStaticMarkup!(
-        R.createElement(R.Fragment, null,
-            R.createElement('title', null, head.title),
-            ...metaEntries.map(([id, opts]) => R.createElement('meta', { key: id, id, ...(opts as any) })),
-            ...linkEntries.map(([id, opts]) => R.createElement('link', { key: id, id, ...(opts as any) })),
-            ...styleEntries.map(([id, opts]) => R.createElement('style', { key: id, id, ...(opts as any) })),
-            ...scriptEntries.map(([id, opts]) => R.createElement('script', { key: id, id, ...(opts as any) })),
-        )
-    );
+// ── Head HTML serialisation ────────────────────────────────────────────────
+
+const ESC: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
+const escAttr = (s: string) => s.replace(/[&<>"]/g, c => ESC[c] ?? c);
+const escText = (s: string) => s.replace(/[&<>]/g, c => ESC[c] ?? c);
+
+const HEAD_ATTR: Record<string, string> = {
+    className: 'class', htmlFor: 'for', httpEquiv: 'http-equiv',
+    charSet: 'charset', crossOrigin: 'crossorigin',
+};
+
+function renderHeadTag(tag: string, id: string, opts: Record<string, unknown>, selfClose = false): string {
+    let a = ` id="${escAttr(id)}"`;
+    let inner = '';
+    for (const [k, v] of Object.entries(opts)) {
+        if (k === 'key' || k === 'children') continue;
+        if (k === 'dangerouslySetInnerHTML') { inner = (v as any).__html ?? ''; continue; }
+        const attr = HEAD_ATTR[k] ?? k;
+        if (v === true) a += ` ${attr}`;
+        else if (v !== false && v != null) a += ` ${attr}="${escAttr(String(v))}"`;
+    }
+    return selfClose ? `<${tag}${a}>` : `<${tag}${a}>${inner}</${tag}>`;
 }
 
-function buildReactPage(appProps: any, clientProps: any) {
-    const R = _React;
-    const Component = _ssrMod.default;
-    return R.createElement(
-        R.Fragment, null,
-        R.createElement('div', { id: 'app' },
-            R.createElement(Component, appProps),
-        ),
-        R.createElement('script', {
-            id: 'hadars',
-            type: 'application/json',
-            dangerouslySetInnerHTML: {
-                __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c'),
-            },
-        }),
-    );
+function buildHeadHtml(head: any): string {
+    let html = `<title>${escText(head.title ?? '')}</title>`;
+    for (const [id, opts] of Object.entries(head.meta ?? {}))
+        html += renderHeadTag('meta', id, opts as Record<string, unknown>, true);
+    for (const [id, opts] of Object.entries(head.link ?? {}))
+        html += renderHeadTag('link', id, opts as Record<string, unknown>, true);
+    for (const [id, opts] of Object.entries(head.style ?? {}))
+        html += renderHeadTag('style', id, opts as Record<string, unknown>);
+    for (const [id, opts] of Object.entries(head.script ?? {}))
+        html += renderHeadTag('script', id, opts as Record<string, unknown>);
+    return html;
 }
 
+// ── Full lifecycle ─────────────────────────────────────────────────────────
+
 async function runFullLifecycle(serialReq: SerializableRequest) {
-    const R = _React;
     const Component = _ssrMod.default;
     const { getInitProps, getAfterRenderProps, getFinalProps } = _ssrMod;
 
     const parsedReq = deserializeRequest(serialReq);
 
-    const unsuspend: any = { cache: new Map(), hasPending: false };
     const context: any = {
         head: { title: 'Hadars App', meta: {}, link: {}, style: {}, script: {}, status: 200 },
-        _unsuspend: unsuspend,
     };
 
     let props: any = {
@@ -128,82 +98,77 @@ async function runFullLifecycle(serialReq: SerializableRequest) {
         context,
     };
 
-    // useServerData render loop — same logic as getReactResponse on main thread.
-    let html = '';
-    let iters = 0;
-    do {
-        unsuspend.hasPending = false;
-        try {
-            (globalThis as any).__hadarsUnsuspend = unsuspend;
-            html = _renderToStaticMarkup!(R.createElement(Component, props));
-        } finally {
-            (globalThis as any).__hadarsUnsuspend = null;
-        }
-        if (unsuspend.hasPending) {
-            const pending = [...unsuspend.cache.values()]
-                .filter((e: any) => e.status === 'pending')
-                .map((e: any) => e.promise);
-            await Promise.all(pending);
-        }
-    } while (unsuspend.hasPending && ++iters < 25);
-    if (unsuspend.hasPending) {
-        console.warn('[hadars] SSR render loop hit the 25-iteration cap — some useServerData values may not be resolved. Check for data dependencies that are never fulfilled.');
-    }
-
-    props = getAfterRenderProps ? await getAfterRenderProps(props, html) : props;
+    // Create per-request cache for useServerData, active for all renders.
+    const unsuspend = { cache: new Map<string, any>() };
+    (globalThis as any).__hadarsUnsuspend = unsuspend;
 
-    // Re-render to capture head changes from getAfterRenderProps.
     try {
-        (globalThis as any).__hadarsUnsuspend = unsuspend;
-        _renderToStaticMarkup!(R.createElement(Component, { ...props, location: serialReq.location, context }));
+        let html = await renderToString(createElement(Component, props));
+
+        if (getAfterRenderProps) {
+            props = await getAfterRenderProps(props, html);
+            await renderToString(
+                createElement(Component, { ...props, location: serialReq.location, context }),
+            );
+        }
     } finally {
         (globalThis as any).__hadarsUnsuspend = null;
     }
 
-    // Collect resolved useServerData values for client hydration.
+    const { context: _ctx, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
+
+    // Collect fulfilled useServerData values for client-side hydration.
     const serverData: Record<string, unknown> = {};
-    for (const [k, v] of unsuspend.cache) {
-        if ((v as any).status === 'fulfilled') serverData[k] = (v as any).value;
-        if ((v as any).status === 'suspense-cached') serverData[k] = (v as any).value;
+    for (const [key, entry] of unsuspend.cache) {
+        if (entry.status === 'fulfilled') serverData[key] = entry.value;
     }
-
-    const { context: _ctx, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
     const clientProps = {
         ...restProps,
         location: serialReq.location,
         ...(Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}),
     };
 
-    const headHtml = buildHeadHtml(context.head);
-    const status: number = context.head.status ?? 200;
     const finalAppProps = { ...props, location: serialReq.location, context };
-
-    return { finalAppProps, clientProps, headHtml, status, unsuspend };
+    return { finalAppProps, clientProps, unsuspend, headHtml: buildHeadHtml(context.head), status: context.head.status ?? 200 };
 }
 
+// ── Message handler ────────────────────────────────────────────────────────
+
 parentPort!.on('message', async (msg: any) => {
     const { id, type, request } = msg;
     try {
         await init();
-
         if (type !== 'renderFull') return;
 
-        const { finalAppProps, clientProps, headHtml, status, unsuspend } =
+        const { finalAppProps, clientProps, unsuspend, headHtml, status } =
             await runFullLifecycle(request as SerializableRequest);
 
-        const ReactPage = buildReactPage(finalAppProps, clientProps);
+        const Component = _ssrMod.default;
 
+        const page = createElement(Fragment, null,
+            createElement('div', { id: 'app' }, createElement(Component, finalAppProps)),
+            createElement('script', {
+                id: 'hadars',
+                type: 'application/json',
+                dangerouslySetInnerHTML: {
+                    __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c'),
+                },
+            }),
+        );
+
+        // Re-use the same cache so useServerData returns immediately (no re-fetch).
+        (globalThis as any).__hadarsUnsuspend = unsuspend;
         let html: string;
         try {
-            (globalThis as any).__hadarsUnsuspend = unsuspend;
-            html = _renderToString!(ReactPage);
+            html = await renderToString(page);
         } finally {
             (globalThis as any).__hadarsUnsuspend = null;
         }
+        html = processSegmentCache(html);
+
         parentPort!.postMessage({ id, html, headHtml, status });
 
     } catch (err: any) {
-        (globalThis as any).__hadarsUnsuspend = null;
         parentPort!.postMessage({ id, error: err?.message ?? String(err) });
     }
 });

package/src/utils/Head.tsx

@@ -273,8 +273,7 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
                     () => { unsuspend.cache.set(cacheKey, { status: 'suspense-resolved' }); },
                 );
                 unsuspend.cache.set(cacheKey, { status: 'pending', promise: suspensePromise });
-                unsuspend.hasPending = true;
-                return undefined;
+                throw suspensePromise; // slim-react will await and retry
             }
             throw thrown;
         }
@@ -294,12 +293,10 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
             reason => { unsuspend.cache.set(cacheKey, { status: 'rejected', reason }); },
         );
         unsuspend.cache.set(cacheKey, { status: 'pending', promise });
-        unsuspend.hasPending = true;
-        return undefined;
+        throw promise; // slim-react will await and retry
     }
     if (existing.status === 'pending') {
-        unsuspend.hasPending = true;
-        return undefined;
+        throw existing.promise; // slim-react will await and retry
     }
     if (existing.status === 'rejected') throw existing.reason;
     return existing.value as T;

package/src/utils/response.tsx

@@ -1,23 +1,6 @@
 import type React from "react";
-import { createRequire } from "node:module";
-import pathMod from "node:path";
-import { pathToFileURL } from "node:url";
-import type { AppHead, AppUnsuspend, HadarsRequest, HadarsEntryBase, HadarsEntryModule, HadarsProps, AppContext } from "../types/hadars";
-
-// Resolve react-dom/server from the *project's* node_modules (process.cwd()) so
-// the same React instance is used here as in the SSR bundle. Without this,
-// when hadars is installed as a file: symlink the renderer ends up on a
-// different React than the component, breaking hook calls.
-let _renderToStaticMarkup: ((element: any) => string) | null = null;
-async function getStaticMarkupRenderer(): Promise<(element: any) => string> {
-    if (!_renderToStaticMarkup) {
-        const req = createRequire(pathMod.resolve(process.cwd(), '__hadars_fake__.js'));
-        const resolved = req.resolve('react-dom/server');
-        const mod = await import(pathToFileURL(resolved).href);
-        _renderToStaticMarkup = mod.renderToStaticMarkup;
-    }
-    return _renderToStaticMarkup!;
-}
+import type { AppHead, HadarsRequest, HadarsEntryBase, HadarsEntryModule, HadarsProps, AppContext } from "../types/hadars";
+import { renderToString, createElement, Fragment } from '../slim-react/index';
 
 interface ReactResponseOptions {
     document: {
@@ -30,13 +13,12 @@ interface ReactResponseOptions {
     }
 }
 
-// ── Head HTML serialisation (no React render needed) ─────────────────────────
+// ── Head HTML serialisation ────────────────────────────────────────────────
 
 const ESC: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
 const escAttr = (s: string) => s.replace(/[&<>"]/g, c => ESC[c] ?? c);
 const escText = (s: string) => s.replace(/[&<>]/g, c => ESC[c] ?? c);
 
-// React prop → HTML attribute name for the subset used in head tags.
 const ATTR: Record<string, string> = {
     className: 'class', htmlFor: 'for', httpEquiv: 'http-equiv',
     charSet: 'charset', crossOrigin: 'crossorigin', noModule: 'nomodule',
@@ -69,12 +51,12 @@ const getHeadHtml = (seoData: AppHead): string => {
     return html;
 };
 
-
 export const getReactResponse = async (
     req: HadarsRequest,
     opts: ReactResponseOptions,
 ): Promise<{
-    ReactPage: React.ReactElement,
+    ReactPage: any,
+    unsuspend: { cache: Map<string, any> },
     status: number,
     headHtml: string,
     renderPayload: {
@@ -82,113 +64,68 @@ export const getReactResponse = async (
         clientProps: Record<string, unknown>;
     };
 }> => {
-    const App = opts.document.body
+    const App = opts.document.body;
     const { getInitProps, getAfterRenderProps, getFinalProps } = opts.document;
 
-    const renderToStaticMarkup = await getStaticMarkupRenderer();
-
-    // Per-request unsuspend context — populated by useServerData() hooks during render.
-    // Lifecycle passes always run on the main thread so the cache is directly accessible.
-    // Kept as a plain AppUnsuspend (no methods) so it is serializable via structuredClone
-    // for postMessage to worker threads.
-    const unsuspend: AppUnsuspend = {
-        cache: new Map(),
-        hasPending: false,
-    };
-    const processUnsuspend = async () => {
-        const pending = [...unsuspend.cache.values()]
-            .filter((e): e is { status: 'pending'; promise: Promise<unknown> } => e.status === 'pending')
-            .map(e => e.promise);
-        await Promise.all(pending);
-    };
-
     const context: AppContext = {
-        head: {
-            title: "Hadars App",
-            meta: {},
-            link: {},
-            style: {},
-            script: {},
-            status: 200,
-        },
-        _unsuspend: unsuspend,
-    }
+        head: { title: 'Hadars App', meta: {}, link: {}, style: {}, script: {}, status: 200 },
+    };
 
     let props: HadarsEntryBase = {
         ...(getInitProps ? await getInitProps(req) : {}),
         location: req.location,
         context,
-    } as HadarsEntryBase
-
-    // ── First lifecycle pass: useServerData render loop ───────────────────────
-    // Render the component repeatedly until all useServerData() promises have
-    // resolved. Each iteration discovers new pending promises; awaiting them
-    // before the next pass ensures every hook returns its value by the final
-    // iteration. Capped at 25 iterations as a safety guard against infinite loops.
-    let html = '';
-    let iters = 0;
-    do {
-        unsuspend.hasPending = false;
-        try {
-            (globalThis as any).__hadarsUnsuspend = unsuspend;
-            html = renderToStaticMarkup(<App {...(props as any)} />);
-        } finally {
-            (globalThis as any).__hadarsUnsuspend = null;
+    } as HadarsEntryBase;
+
+    // Create per-request cache for useServerData, active for all renders.
+    const unsuspend = { cache: new Map<string, any>() };
+    (globalThis as any).__hadarsUnsuspend = unsuspend;
+    try {
+        let html = await renderToString(createElement(App as any, props as any));
+        if (getAfterRenderProps) {
+            props = await getAfterRenderProps(props, html);
+            await renderToString(
+                createElement(App as any, { ...props, location: req.location, context } as any),
+            );
         }
-        if (unsuspend.hasPending) await processUnsuspend();
-    } while (unsuspend.hasPending && ++iters < 25);
-    if (unsuspend.hasPending) {
-        console.warn('[hadars] SSR render loop hit the 25-iteration cap — some useServerData values may not be resolved. Check for data dependencies that are never fulfilled.');
+    } finally {
+        (globalThis as any).__hadarsUnsuspend = null;
     }
 
-    if (getAfterRenderProps) {
-        props = await getAfterRenderProps(props, html);
-        // Re-render only when getAfterRenderProps is present — it may mutate
-        // props that affect head tags, so we need another pass to capture them.
-        try {
-            (globalThis as any).__hadarsUnsuspend = unsuspend;
-            renderToStaticMarkup(<App {...({ ...props, location: req.location, context })} />);
-        } finally {
-            (globalThis as any).__hadarsUnsuspend = null;
-        }
-    }
+    const { context: _, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
 
-    // Serialize resolved useServerData() values for client hydration.
-    // The client bootstrap reads __serverData and pre-populates the hook cache
-    // before hydrateRoot so that useServerData() returns the same values CSR.
+    // Collect fulfilled useServerData values for client-side hydration.
     const serverData: Record<string, unknown> = {};
-    for (const [k, v] of unsuspend.cache) {
-        if (v.status === 'fulfilled') serverData[k] = v.value;
+    for (const [key, entry] of unsuspend.cache) {
+        if (entry.status === 'fulfilled') serverData[key] = entry.value;
     }
-
-    const { context: _, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
     const clientProps = {
         ...restProps,
         location: req.location,
         ...(Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}),
-    }
+    };
 
-    const ReactPage = (
-        <>
-            <div id="app">
-                <App {...({
-                    ...props,
-                    location: req.location,
-                    context,
-                })} />
-            </div>
-            <script id="hadars" type="application/json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c') }}></script>
-        </>
-    )
+    const ReactPage = createElement(Fragment, null,
+        createElement('div', { id: 'app' },
+            createElement(App as any, { ...props, location: req.location, context } as any),
+        ),
+        createElement('script', {
+            id: 'hadars',
+            type: 'application/json',
+            dangerouslySetInnerHTML: {
+                __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c'),
+            },
+        }),
+    );
 
     return {
         ReactPage,
+        unsuspend,
         status: context.head.status,
         headHtml: getHeadHtml(context.head),
         renderPayload: {
             appProps: { ...props, location: req.location, context } as Record<string, unknown>,
             clientProps: clientProps as Record<string, unknown>,
         },
-    }
-
-}
+    };
+};