hadars 0.1.31 → 0.1.33

package/README.md

@@ -16,6 +16,10 @@ hadars is an alternative to Next.js for apps that just need SSR.
 
 Bring your own router (or none), keep your components as plain React, and get SSR, HMR, and a production build from a single config file.
 
+## Benchmarks
+
+Benchmarks against an equivalent Next.js app show significantly faster server throughput (requests/second) and meaningfully better page load metrics (TTFB, FCP, DOMContentLoaded). Build times are also much lower due to rspack.
+
 ## Quick start
 
 Scaffold a new project in seconds:
@@ -114,7 +118,6 @@ const UserCard = ({ userId }: { userId: string }) => {
 - **`key`** - string or string array; must be stable and unique within the page
 - **Server** - calls `fn()`, awaits the result across render iterations, returns `undefined` until resolved
 - **Client** - reads the pre-resolved value from the hydration cache serialised by the server; `fn()` is never called in the browser
-- **Suspense libraries** - also works when `fn()` throws a thenable (e.g. Relay `useLazyLoadQuery` with `suspense: true`); the thrown promise is awaited and the next render re-calls `fn()` synchronously
 
 ## Data lifecycle hooks
 
@@ -182,21 +185,14 @@ export default config;
 
 ## slim-react
 
-hadars ships its own lightweight React-compatible SSR renderer called **slim-react** (`src/slim-react/`). It replaces `react-dom/server` entirely on the server side - no `renderToStaticMarkup`, no `renderToPipeableStream`, no react-dom dependency at all.
-
-For server builds, rspack aliases `react` and `react/jsx-runtime` to slim-react, so your components and any libraries they import render through it automatically without any code changes.
-
-**What it does:**
-
-- Renders the full component tree to an HTML string with native `async/await` support - async components and hooks that return Promises are awaited directly without streaming workarounds
-- Implements the React Suspense protocol: when a component throws a Promise (e.g. from `useServerData` or a Suspense-enabled data library), slim-react awaits it and retries the tree automatically
-- Emits React-compatible hydration markers - `<!--$-->…<!--/$-->` for resolved Suspense boundaries, `<!-- -->` separators between adjacent text nodes - so `hydrateRoot` on the client works without mismatches
-- Supports `React.memo`, `React.forwardRef`, `React.lazy`, `Context.Provider`, `Context.Consumer`, and the React 18/19 element wire formats
-- Covers the full hook surface needed for SSR: `useState`, `useReducer`, `useContext`, `useRef`, `useMemo`, `useCallback`, `useId`, `useSyncExternalStore`, `use`, and more - all as lightweight SSR stubs
+hadars ships its own lightweight React-compatible SSR renderer called **slim-react** (`src/slim-react/`). It replaces `react-dom/server` on the server side entirely.
 
-**Why not react-dom/server?**
+For server builds, rspack aliases `react` and `react/jsx-runtime` to slim-react, so your components and any libraries they import render through it automatically without code changes.
 
-`react-dom/server` cannot `await` arbitrary Promises thrown during render - it only handles Suspense via streaming and requires components to use `React.lazy` or Relay-style Suspense resources. slim-react's retry loop makes `useServerData` (and any hook that throws a Promise) work without wrapping every async component in a `<Suspense>` boundary.
+- Renders the full component tree to an HTML string with native `async/await` — async components are awaited directly
+- Implements the React Suspense protocol: thrown Promises (e.g. from `useSuspenseQuery`) are awaited and the component retried automatically
+- Compatible with `hydrateRoot` — output matches what React expects on the client
+- Supports `React.memo`, `React.forwardRef`, `React.lazy`, `Context.Provider`, `Context.Consumer`, and the React 19 element format
 
 ## License
 

package/dist/cli.js

@@ -387,17 +387,23 @@ var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
+var HTML_ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#x27;" };
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#x27;");
+  return str.replace(/[&<>']/g, (c) => HTML_ESC[c]);
 }
+var ATTR_ESC = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
 function escapeAttr(str) {
-  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return str.replace(/[&"<>]/g, (c) => ATTR_ESC[c]);
 }
 function styleObjectToString(style) {
-  return Object.entries(style).map(([key, value]) => {
+  let result = "";
+  for (const key in style) {
+    if (result)
+      result += ";";
     const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-    return `${cssKey}:${value}`;
-  }).join(";");
+    result += cssKey + ":" + style[key];
+  }
+  return result;
 }
 var SVG_ATTR_MAP = {
   // Presentation / geometry
@@ -532,7 +538,8 @@ var SVG_ATTR_MAP = {
 };
 function renderAttributes(props, isSvg) {
   let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
+  for (const key in props) {
+    const value = props[key];
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || key === "suppressHydrationWarning" || key === "suppressContentEditableWarning")
       continue;
     if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
@@ -996,6 +1003,45 @@ async function renderToString(element, options) {
   }
 }
 
+// src/utils/segmentCache.ts
+function getStore() {
+  const g = globalThis;
+  if (!g.__hadarsSegmentStore) {
+    g.__hadarsSegmentStore = /* @__PURE__ */ new Map();
+  }
+  return g.__hadarsSegmentStore;
+}
+function setSegment(key, html, ttl) {
+  getStore().set(key, {
+    html,
+    expiresAt: ttl != null ? Date.now() + ttl : null
+  });
+}
+function processSegmentCache(html) {
+  let prev;
+  do {
+    prev = html;
+    html = html.replace(
+      /<hadars-c([^>]*)>([\s\S]*?)<\/hadars-c>/g,
+      (match, attrs, content) => {
+        const cacheM = /data-cache="([^"]+)"/.exec(attrs);
+        const keyM = /data-key="([^"]+)"/.exec(attrs);
+        const ttlM = /data-ttl="(\d+)"/.exec(attrs);
+        if (!cacheM || !keyM)
+          return match;
+        if (cacheM[1] === "miss") {
+          setSegment(keyM[1], content, ttlM ? Number(ttlM[1]) : void 0);
+          return content;
+        }
+        if (cacheM[1] === "hit")
+          return content;
+        return match;
+      }
+    );
+  } while (html !== prev);
+  return html;
+}
+
 // src/utils/response.tsx
 var ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" };
 var escAttr = (s2) => s2.replace(/[&<>"]/g, (c) => ESC[c] ?? c);
@@ -1053,11 +1099,12 @@ var getReactResponse = async (req, opts) => {
   };
   const unsuspend = { cache: /* @__PURE__ */ new Map() };
   globalThis.__hadarsUnsuspend = unsuspend;
+  let bodyHtml;
   try {
-    let html = await renderToString(createElement(App, props));
+    bodyHtml = await renderToString(createElement(App, props));
     if (getAfterRenderProps) {
-      props = await getAfterRenderProps(props, html);
-      await renderToString(
+      props = await getAfterRenderProps(props, bodyHtml);
+      bodyHtml = await renderToString(
         createElement(App, { ...props, location: req.location, context })
       );
     }
@@ -1075,12 +1122,9 @@ var getReactResponse = async (req, opts) => {
     location: req.location,
     ...Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}
   };
-  const appProps = { ...props, location: req.location, context };
   return {
-    App,
-    appProps,
+    bodyHtml: processSegmentCache(bodyHtml),
     clientProps,
-    unsuspend,
     status: context.head.status,
     headHtml: getHeadHtml(context.head)
   };
@@ -1631,47 +1675,6 @@ import { existsSync as existsSync2 } from "node:fs";
 import os from "node:os";
 import { spawn } from "node:child_process";
 import cluster from "node:cluster";
-
-// src/utils/segmentCache.ts
-function getStore() {
-  const g = globalThis;
-  if (!g.__hadarsSegmentStore) {
-    g.__hadarsSegmentStore = /* @__PURE__ */ new Map();
-  }
-  return g.__hadarsSegmentStore;
-}
-function setSegment(key, html, ttl) {
-  getStore().set(key, {
-    html,
-    expiresAt: ttl != null ? Date.now() + ttl : null
-  });
-}
-function processSegmentCache(html) {
-  let prev;
-  do {
-    prev = html;
-    html = html.replace(
-      /<hadars-c([^>]*)>([\s\S]*?)<\/hadars-c>/g,
-      (match, attrs, content) => {
-        const cacheM = /data-cache="([^"]+)"/.exec(attrs);
-        const keyM = /data-key="([^"]+)"/.exec(attrs);
-        const ttlM = /data-ttl="(\d+)"/.exec(attrs);
-        if (!cacheM || !keyM)
-          return match;
-        if (cacheM[1] === "miss") {
-          setSegment(keyM[1], content, ttlM ? Number(ttlM[1]) : void 0);
-          return content;
-        }
-        if (cacheM[1] === "hit")
-          return content;
-        return match;
-      }
-    );
-  } while (html !== prev);
-  return html;
-}
-
-// src/build.ts
 var encoder = new TextEncoder();
 async function processHtmlTemplate(templatePath) {
   const html = await fs.readFile(templatePath, "utf-8");
@@ -1816,19 +1819,11 @@ var RenderWorkerPool = class {
     await Promise.all(this.workers.map((w) => w.terminate()));
   }
 };
-async function buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspendForRender) {
+async function buildSsrResponse(bodyHtml, clientProps, headHtml, status, getPrecontentHtml) {
   const responseStream = new ReadableStream({
     async start(controller) {
       const [precontentHtml, postContent] = await getPrecontentHtml(headHtml);
       controller.enqueue(encoder.encode(precontentHtml));
-      let bodyHtml;
-      try {
-        globalThis.__hadarsUnsuspend = unsuspendForRender;
-        bodyHtml = await renderToString(createElement(App, appProps));
-      } finally {
-        globalThis.__hadarsUnsuspend = null;
-      }
-      bodyHtml = processSegmentCache(bodyHtml);
       const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, "\\u003c");
       controller.enqueue(encoder.encode(
         `<div id="app">${bodyHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>` + postContent
@@ -2202,7 +2197,7 @@ var dev = async (options) => {
         getAfterRenderProps,
         getFinalProps
       } = await import(importPath);
-      const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
+      const { bodyHtml, clientProps, status, headHtml } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
@@ -2211,7 +2206,7 @@ var dev = async (options) => {
           getFinalProps
         }
       });
-      return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
+      return buildSsrResponse(bodyHtml, clientProps, headHtml, status, getPrecontentHtml);
     } catch (err) {
       console.error("[hadars] SSR render error:", err);
       const msg = (err?.stack ?? err?.message ?? String(err)).replace(/</g, "&lt;");
@@ -2356,7 +2351,7 @@ var run = async (options) => {
           status: wStatus
         });
       }
-      const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
+      const { bodyHtml, clientProps, status, headHtml } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
@@ -2365,7 +2360,7 @@ var run = async (options) => {
           getFinalProps
         }
       });
-      return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
+      return buildSsrResponse(bodyHtml, clientProps, headHtml, status, getPrecontentHtml);
     } catch (err) {
       console.error("[hadars] SSR render error:", err);
       return new Response("Internal Server Error", { status: 500 });

package/dist/index.cjs

@@ -189,37 +189,8 @@ function useServerData(key, fn) {
   if (!unsuspend)
     return void 0;
   const existing = unsuspend.cache.get(cacheKey);
-  if (existing?.status === "suspense-resolved") {
-    try {
-      const value = fn();
-      unsuspend.cache.set(cacheKey, { status: "suspense-cached", value });
-      return value;
-    } catch {
-      return void 0;
-    }
-  }
-  if (existing?.status === "suspense-cached") {
-    return existing.value;
-  }
   if (!existing) {
-    let result;
-    try {
-      result = fn();
-    } catch (thrown) {
-      if (thrown !== null && typeof thrown === "object" && typeof thrown.then === "function") {
-        const suspensePromise = Promise.resolve(thrown).then(
-          () => {
-            unsuspend.cache.set(cacheKey, { status: "suspense-resolved" });
-          },
-          () => {
-            unsuspend.cache.set(cacheKey, { status: "suspense-resolved" });
-          }
-        );
-        unsuspend.cache.set(cacheKey, { status: "pending", promise: suspensePromise });
-        throw suspensePromise;
-      }
-      throw thrown;
-    }
+    const result = fn();
     const isThenable = result !== null && typeof result === "object" && typeof result.then === "function";
     if (!isThenable) {
       const value = result;

package/dist/index.d.ts

@@ -28,11 +28,6 @@ type UnsuspendEntry = {
 } | {
     status: 'fulfilled';
     value: unknown;
-} | {
-    status: 'suspense-resolved';
-} | {
-    status: 'suspense-cached';
-    value: unknown;
 } | {
     status: 'rejected';
     reason: unknown;
@@ -40,7 +35,6 @@ type UnsuspendEntry = {
 /** @internal Populated by the framework's render loop — use useServerData() instead. */
 interface AppUnsuspend {
     cache: Map<string, UnsuspendEntry>;
-    hasPending: boolean;
 }
 interface AppContext {
     path?: string;
@@ -197,16 +191,11 @@ declare function initServerDataCache(data: Record<string, unknown>): void;
  * across all SSR render passes and client hydration — it must be stable and
  * unique within the page.
  *
- * `fn` may return a `Promise<T>` (normal async usage), return `T` synchronously,
- * or throw a thenable (React Suspense protocol). All three cases are handled:
- * - Async `Promise<T>`: awaited across render iterations, result cached.
- * - Synchronous return: value stored immediately, returned on the same pass.
- * - Thrown thenable (e.g. `useQuery({ suspense: true })`): the thrown promise is
- *   awaited, the cache entry is then cleared so that the next render re-calls
- *   `fn()` — at that point the Suspense hook returns synchronously.
+ * `fn` may return a `Promise<T>` (async usage) or return `T` synchronously.
+ * The resolved value is serialised into `__serverData` and returned from cache
+ * during hydration.
  *
- * `fn` is **server-only**: it is never called in the browser. The resolved value
- * is serialised into `__serverData` and returned from cache during hydration.
+ * `fn` is **server-only**: it is never called in the browser.
  *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));

package/dist/index.js

@@ -146,37 +146,8 @@ function useServerData(key, fn) {
   if (!unsuspend)
     return void 0;
   const existing = unsuspend.cache.get(cacheKey);
-  if (existing?.status === "suspense-resolved") {
-    try {
-      const value = fn();
-      unsuspend.cache.set(cacheKey, { status: "suspense-cached", value });
-      return value;
-    } catch {
-      return void 0;
-    }
-  }
-  if (existing?.status === "suspense-cached") {
-    return existing.value;
-  }
   if (!existing) {
-    let result;
-    try {
-      result = fn();
-    } catch (thrown) {
-      if (thrown !== null && typeof thrown === "object" && typeof thrown.then === "function") {
-        const suspensePromise = Promise.resolve(thrown).then(
-          () => {
-            unsuspend.cache.set(cacheKey, { status: "suspense-resolved" });
-          },
-          () => {
-            unsuspend.cache.set(cacheKey, { status: "suspense-resolved" });
-          }
-        );
-        unsuspend.cache.set(cacheKey, { status: "pending", promise: suspensePromise });
-        throw suspensePromise;
-      }
-      throw thrown;
-    }
+    const result = fn();
     const isThenable = result !== null && typeof result === "object" && typeof result.then === "function";
     if (!isThenable) {
       const value = result;

package/dist/slim-react/index.cjs

@@ -370,17 +370,23 @@ var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
+var HTML_ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#x27;" };
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#x27;");
+  return str.replace(/[&<>']/g, (c) => HTML_ESC[c]);
 }
+var ATTR_ESC = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
 function escapeAttr(str) {
-  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return str.replace(/[&"<>]/g, (c) => ATTR_ESC[c]);
 }
 function styleObjectToString(style) {
-  return Object.entries(style).map(([key, value]) => {
+  let result = "";
+  for (const key in style) {
+    if (result)
+      result += ";";
     const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-    return `${cssKey}:${value}`;
-  }).join(";");
+    result += cssKey + ":" + style[key];
+  }
+  return result;
 }
 var SVG_ATTR_MAP = {
   // Presentation / geometry
@@ -515,7 +521,8 @@ var SVG_ATTR_MAP = {
 };
 function renderAttributes(props, isSvg) {
   let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
+  for (const key in props) {
+    const value = props[key];
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || key === "suppressHydrationWarning" || key === "suppressContentEditableWarning")
       continue;
     if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())

package/dist/slim-react/index.js

@@ -269,17 +269,23 @@ var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
+var HTML_ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#x27;" };
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#x27;");
+  return str.replace(/[&<>']/g, (c) => HTML_ESC[c]);
 }
+var ATTR_ESC = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
 function escapeAttr(str) {
-  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return str.replace(/[&"<>]/g, (c) => ATTR_ESC[c]);
 }
 function styleObjectToString(style) {
-  return Object.entries(style).map(([key, value]) => {
+  let result = "";
+  for (const key in style) {
+    if (result)
+      result += ";";
     const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-    return `${cssKey}:${value}`;
-  }).join(";");
+    result += cssKey + ":" + style[key];
+  }
+  return result;
 }
 var SVG_ATTR_MAP = {
   // Presentation / geometry
@@ -414,7 +420,8 @@ var SVG_ATTR_MAP = {
 };
 function renderAttributes(props, isSvg) {
   let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
+  for (const key in props) {
+    const value = props[key];
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || key === "suppressHydrationWarning" || key === "suppressContentEditableWarning")
       continue;
     if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())

package/dist/ssr-render-worker.js

@@ -294,17 +294,23 @@ var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
+var HTML_ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#x27;" };
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#x27;");
+  return str.replace(/[&<>']/g, (c) => HTML_ESC[c]);
 }
+var ATTR_ESC = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
 function escapeAttr(str) {
-  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return str.replace(/[&"<>]/g, (c) => ATTR_ESC[c]);
 }
 function styleObjectToString(style) {
-  return Object.entries(style).map(([key, value]) => {
+  let result = "";
+  for (const key in style) {
+    if (result)
+      result += ";";
     const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-    return `${cssKey}:${value}`;
-  }).join(";");
+    result += cssKey + ":" + style[key];
+  }
+  return result;
 }
 var SVG_ATTR_MAP = {
   // Presentation / geometry
@@ -439,7 +445,8 @@ var SVG_ATTR_MAP = {
 };
 function renderAttributes(props, isSvg) {
   let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
+  for (const key in props) {
+    const value = props[key];
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || key === "suppressHydrationWarning" || key === "suppressContentEditableWarning")
       continue;
     if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
@@ -973,16 +980,18 @@ async function runFullLifecycle(serialReq) {
   };
   const unsuspend = { cache: /* @__PURE__ */ new Map() };
   globalThis.__hadarsUnsuspend = unsuspend;
+  let prelimHtml;
   try {
-    let html = await renderToString(createElement(Component, props));
+    prelimHtml = await renderToString(createElement(Component, props));
     if (getAfterRenderProps) {
-      props = await getAfterRenderProps(props, html);
+      props = await getAfterRenderProps(props, prelimHtml);
       await renderToString(
         createElement(Component, { ...props, location: serialReq.location, context })
       );
     }
-  } finally {
+  } catch (e) {
     globalThis.__hadarsUnsuspend = null;
+    throw e;
   }
   const { context: _ctx, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
   const serverData = {};
@@ -996,7 +1005,16 @@ async function runFullLifecycle(serialReq) {
     ...Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}
   };
   const finalAppProps = { ...props, location: serialReq.location, context };
-  return { finalAppProps, clientProps, unsuspend, headHtml: buildHeadHtml(context.head), status: context.head.status ?? 200 };
+  let appHtml;
+  try {
+    appHtml = await renderToString(createElement(Component, finalAppProps));
+  } finally {
+    globalThis.__hadarsUnsuspend = null;
+  }
+  appHtml = processSegmentCache(appHtml);
+  const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, "\\u003c");
+  const html = `<div id="app">${appHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>`;
+  return { html, headHtml: buildHeadHtml(context.head), status: context.head.status ?? 200 };
 }
 parentPort.on("message", async (msg) => {
   const { id, type, request } = msg;
@@ -1004,18 +1022,7 @@ parentPort.on("message", async (msg) => {
     await init();
     if (type !== "renderFull")
       return;
-    const { finalAppProps, clientProps, unsuspend, headHtml, status } = await runFullLifecycle(request);
-    const Component = _ssrMod.default;
-    globalThis.__hadarsUnsuspend = unsuspend;
-    let appHtml;
-    try {
-      appHtml = await renderToString(createElement(Component, finalAppProps));
-    } finally {
-      globalThis.__hadarsUnsuspend = null;
-    }
-    appHtml = processSegmentCache(appHtml);
-    const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, "\\u003c");
-    const html = `<div id="app">${appHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>`;
+    const { html, headHtml, status } = await runFullLifecycle(request);
     parentPort.postMessage({ id, html, headHtml, status });
   } catch (err) {
     parentPort.postMessage({ id, error: err?.message ?? String(err) });

package/dist/utils/Head.tsx

@@ -196,16 +196,11 @@ export function initServerDataCache(data: Record<string, unknown>) {
  * across all SSR render passes and client hydration — it must be stable and
  * unique within the page.
  *
- * `fn` may return a `Promise<T>` (normal async usage), return `T` synchronously,
- * or throw a thenable (React Suspense protocol). All three cases are handled:
- * - Async `Promise<T>`: awaited across render iterations, result cached.
- * - Synchronous return: value stored immediately, returned on the same pass.
- * - Thrown thenable (e.g. `useQuery({ suspense: true })`): the thrown promise is
- *   awaited, the cache entry is then cleared so that the next render re-calls
- *   `fn()` — at that point the Suspense hook returns synchronously.
+ * `fn` may return a `Promise<T>` (async usage) or return `T` synchronously.
+ * The resolved value is serialised into `__serverData` and returned from cache
+ * during hydration.
  *
- * `fn` is **server-only**: it is never called in the browser. The resolved value
- * is serialised into `__serverData` and returned from cache during hydration.
+ * `fn` is **server-only**: it is never called in the browser.
  *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));
@@ -230,51 +225,11 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
 
     const existing = unsuspend.cache.get(cacheKey);
 
-    // Suspense promise has resolved — re-call fn() so the hook returns its value
-    // synchronously from its own internal cache. Cache the result as
-    // 'suspense-cached' so later renders (e.g. the final renderToString in
-    // buildSsrResponse, which runs after getFinalProps may have cleared the
-    // user's QueryClient) can return the value without calling fn() again.
-    // NOT stored as 'fulfilled' so it is never included in serverData sent to
-    // the client — the Suspense library owns its own hydration.
-    if (existing?.status === 'suspense-resolved') {
-        try {
-            const value = fn() as T;
-            unsuspend.cache.set(cacheKey, { status: 'suspense-cached', value });
-            return value;
-        } catch {
-            return undefined;
-        }
-    }
-
-    // Return the cached Suspense value on all subsequent renders.
-    if (existing?.status === 'suspense-cached') {
-        return existing.value as T;
-    }
-
     if (!existing) {
         // First encounter — call fn(), which may:
-        //   (a) return a Promise<T>  — normal async usage (serialised for the client)
+        //   (a) return a Promise<T>  — async usage (serialised for the client)
         //   (b) return T synchronously — e.g. a sync data source
-        //   (c) throw a thenable     — Suspense protocol (e.g. useSuspenseQuery)
-        let result: Promise<T> | T;
-        try {
-            result = fn();
-        } catch (thrown) {
-            // (c) Suspense protocol: fn() threw a thenable. Await it, then mark the
-            // entry as 'suspense-resolved' so the next render re-calls fn() to get
-            // the synchronously available value. Not stored as 'fulfilled' → not
-            // serialised to the client (the Suspense library handles its own hydration).
-            if (thrown !== null && typeof thrown === 'object' && typeof (thrown as any).then === 'function') {
-                const suspensePromise = Promise.resolve(thrown as Promise<unknown>).then(
-                    () => { unsuspend.cache.set(cacheKey, { status: 'suspense-resolved' }); },
-                    () => { unsuspend.cache.set(cacheKey, { status: 'suspense-resolved' }); },
-                );
-                unsuspend.cache.set(cacheKey, { status: 'pending', promise: suspensePromise });
-                throw suspensePromise; // slim-react will await and retry
-            }
-            throw thrown;
-        }
+        const result = fn();
 
         const isThenable = result !== null && typeof result === 'object' && typeof (result as any).then === 'function';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hadars",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "Minimal SSR framework for React — rspack, HMR, TypeScript, Bun/Node/Deno",
   "module": "./dist/index.js",
   "type": "module",

package/src/build.ts

@@ -16,7 +16,6 @@ import os from 'node:os';
 import { spawn } from 'node:child_process';
 import cluster from 'node:cluster';
 import type { HadarsEntryModule, HadarsOptions, HadarsProps } from "./types/hadars";
-import { processSegmentCache } from "./utils/segmentCache";
 const encoder = new TextEncoder();
 
 /**
@@ -73,7 +72,7 @@ async function processHtmlTemplate(templatePath: string): Promise<string> {
 const HEAD_MARKER = '<meta name="HADARS_HEAD">';
 const BODY_MARKER = '<meta name="HADARS_BODY">';
 
-import { renderToString as slimRenderToString, createElement } from './slim-react/index';
+
 
 // Round-robin thread pool for SSR rendering — used on Bun/Deno where
 // node:cluster is not available but node:worker_threads is.
@@ -194,29 +193,19 @@ class RenderWorkerPool {
 }
 
 async function buildSsrResponse(
-    App: any,
-    appProps: Record<string, unknown>,
+    bodyHtml: string,
     clientProps: Record<string, unknown>,
     headHtml: string,
     status: number,
     getPrecontentHtml: (headHtml: string) => Promise<[string, string]>,
-    unsuspendForRender: any,
 ): Promise<Response> {
     const responseStream = new ReadableStream({
         async start(controller) {
             const [precontentHtml, postContent] = await getPrecontentHtml(headHtml);
             // Flush the shell (precontentHtml) immediately so the browser can
-            // start loading CSS/fonts before renderToString blocks the thread.
+            // start loading CSS/fonts before the body is assembled.
             controller.enqueue(encoder.encode(precontentHtml));
 
-            let bodyHtml: string;
-            try {
-                (globalThis as any).__hadarsUnsuspend = unsuspendForRender;
-                bodyHtml = await slimRenderToString(createElement(App, appProps));
-            } finally {
-                (globalThis as any).__hadarsUnsuspend = null;
-            }
-            bodyHtml = processSegmentCache(bodyHtml);
             const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c');
             controller.enqueue(encoder.encode(
                 `<div id="app">${bodyHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>` + postContent
@@ -690,7 +679,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
                 getFinalProps,
             } = (await import(importPath)) as HadarsEntryModule<any>;
 
-            const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
+            const { bodyHtml, clientProps, status, headHtml } = await getReactResponse(request, {
                 document: {
                     body: Component as React.FC<HadarsProps<object>>,
                     lang: 'en',
@@ -700,7 +689,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
                 },
             });
 
-            return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
+            return buildSsrResponse(bodyHtml, clientProps, headHtml, status, getPrecontentHtml);
         } catch (err: any) {
             console.error('[hadars] SSR render error:', err);
             const msg = (err?.stack ?? err?.message ?? String(err)).replace(/</g, '&lt;');
@@ -880,7 +869,7 @@ export const run = async (options: HadarsRuntimeOptions) => {
                 });
             }
 
-            const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
+            const { bodyHtml, clientProps, status, headHtml } = await getReactResponse(request, {
                 document: {
                     body: Component as React.FC<HadarsProps<object>>,
                     lang: 'en',
@@ -890,7 +879,7 @@ export const run = async (options: HadarsRuntimeOptions) => {
                 },
             });
 
-            return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
+            return buildSsrResponse(bodyHtml, clientProps, headHtml, status, getPrecontentHtml);
         } catch (err: any) {
             console.error('[hadars] SSR render error:', err);
             return new Response('Internal Server Error', { status: 500 });

package/src/slim-react/render.ts

@@ -61,30 +61,25 @@ const VOID_ELEMENTS = new Set([
   "wbr",
 ]);
 
+const HTML_ESC: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#x27;' };
 function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/'/g, "&#x27;");
+  return str.replace(/[&<>']/g, c => HTML_ESC[c]!);
 }
 
+const ATTR_ESC: Record<string, string> = { '&': '&amp;', '"': '&quot;', '<': '&lt;', '>': '&gt;' };
 function escapeAttr(str: string): string {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/"/g, "&quot;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
+  return str.replace(/[&"<>]/g, c => ATTR_ESC[c]!);
 }
 
 function styleObjectToString(style: Record<string, any>): string {
-  return Object.entries(style)
-    .map(([key, value]) => {
-      // camelCase → kebab-case
-      const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-      return `${cssKey}:${value}`;
-    })
-    .join(";");
+  let result = '';
+  for (const key in style) {
+    if (result) result += ';';
+    // camelCase → kebab-case
+    const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+    result += cssKey + ':' + style[key];
+  }
+  return result;
 }
 
 // ---------------------------------------------------------------------------
@@ -247,7 +242,8 @@ const SVG_ELEMENTS = new Set([
 
 function renderAttributes(props: Record<string, any>, isSvg: boolean): string {
   let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
+  for (const key in props) {
+    const value = props[key];
     // Skip internal / non-attribute props
     if (
       key === "children" ||

package/src/ssr-render-worker.ts

@@ -102,17 +102,19 @@ async function runFullLifecycle(serialReq: SerializableRequest) {
     const unsuspend = { cache: new Map<string, any>() };
     (globalThis as any).__hadarsUnsuspend = unsuspend;
 
+    let prelimHtml: string;
     try {
-        let html = await renderToString(createElement(Component, props));
+        prelimHtml = await renderToString(createElement(Component, props));
 
         if (getAfterRenderProps) {
-            props = await getAfterRenderProps(props, html);
+            props = await getAfterRenderProps(props, prelimHtml);
             await renderToString(
                 createElement(Component, { ...props, location: serialReq.location, context }),
             );
         }
-    } finally {
+    } catch (e) {
         (globalThis as any).__hadarsUnsuspend = null;
+        throw e;
     }
 
     const { context: _ctx, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
@@ -129,7 +131,21 @@ async function runFullLifecycle(serialReq: SerializableRequest) {
     };
 
     const finalAppProps = { ...props, location: serialReq.location, context };
-    return { finalAppProps, clientProps, unsuspend, headHtml: buildHeadHtml(context.head), status: context.head.status ?? 200 };
+
+    // Final render — __hadarsUnsuspend is still set; cache is fully populated so
+    // useServerData calls return cached values without any async work.
+    let appHtml: string;
+    try {
+        appHtml = await renderToString(createElement(Component, finalAppProps));
+    } finally {
+        (globalThis as any).__hadarsUnsuspend = null;
+    }
+    appHtml = processSegmentCache(appHtml);
+
+    const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c');
+    const html = `<div id="app">${appHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>`;
+
+    return { html, headHtml: buildHeadHtml(context.head), status: context.head.status ?? 200 };
 }
 
 // ── Message handler ────────────────────────────────────────────────────────
@@ -140,27 +156,7 @@ parentPort!.on('message', async (msg: any) => {
         await init();
         if (type !== 'renderFull') return;
 
-        const { finalAppProps, clientProps, unsuspend, headHtml, status } =
-            await runFullLifecycle(request as SerializableRequest);
-
-        const Component = _ssrMod.default;
-
-        // Render the Component as the direct root — matching hydrateRoot(div#app, <Component>)
-        // on the client.  Wrapping in Fragment(div#app(...), script) would add an extra
-        // pushTreeContext(2,0) from the Fragment's child array, shifting all tree-position
-        // useId values by 2 bits and causing a hydration mismatch.
-        (globalThis as any).__hadarsUnsuspend = unsuspend;
-        let appHtml: string;
-        try {
-            appHtml = await renderToString(createElement(Component, finalAppProps));
-        } finally {
-            (globalThis as any).__hadarsUnsuspend = null;
-        }
-        appHtml = processSegmentCache(appHtml);
-
-        const scriptContent = JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, '\\u003c');
-        const html = `<div id="app">${appHtml}</div><script id="hadars" type="application/json">${scriptContent}</script>`;
-
+        const { html, headHtml, status } = await runFullLifecycle(request as SerializableRequest);
         parentPort!.postMessage({ id, html, headHtml, status });
 
     } catch (err: any) {

package/src/types/hadars.ts

@@ -26,14 +26,11 @@ export interface AppHead {
 export type UnsuspendEntry =
     | { status: 'pending'; promise: Promise<unknown> }
     | { status: 'fulfilled'; value: unknown }
-    | { status: 'suspense-resolved' }
-    | { status: 'suspense-cached'; value: unknown }
     | { status: 'rejected'; reason: unknown };
 
 /** @internal Populated by the framework's render loop — use useServerData() instead. */
 export interface AppUnsuspend {
     cache: Map<string, UnsuspendEntry>;
-    hasPending: boolean;
 }
 
 export interface AppContext {

package/src/utils/Head.tsx

@@ -196,16 +196,11 @@ export function initServerDataCache(data: Record<string, unknown>) {
  * across all SSR render passes and client hydration — it must be stable and
  * unique within the page.
  *
- * `fn` may return a `Promise<T>` (normal async usage), return `T` synchronously,
- * or throw a thenable (React Suspense protocol). All three cases are handled:
- * - Async `Promise<T>`: awaited across render iterations, result cached.
- * - Synchronous return: value stored immediately, returned on the same pass.
- * - Thrown thenable (e.g. `useQuery({ suspense: true })`): the thrown promise is
- *   awaited, the cache entry is then cleared so that the next render re-calls
- *   `fn()` — at that point the Suspense hook returns synchronously.
+ * `fn` may return a `Promise<T>` (async usage) or return `T` synchronously.
+ * The resolved value is serialised into `__serverData` and returned from cache
+ * during hydration.
  *
- * `fn` is **server-only**: it is never called in the browser. The resolved value
- * is serialised into `__serverData` and returned from cache during hydration.
+ * `fn` is **server-only**: it is never called in the browser.
  *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));
@@ -230,51 +225,11 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
 
     const existing = unsuspend.cache.get(cacheKey);
 
-    // Suspense promise has resolved — re-call fn() so the hook returns its value
-    // synchronously from its own internal cache. Cache the result as
-    // 'suspense-cached' so later renders (e.g. the final renderToString in
-    // buildSsrResponse, which runs after getFinalProps may have cleared the
-    // user's QueryClient) can return the value without calling fn() again.
-    // NOT stored as 'fulfilled' so it is never included in serverData sent to
-    // the client — the Suspense library owns its own hydration.
-    if (existing?.status === 'suspense-resolved') {
-        try {
-            const value = fn() as T;
-            unsuspend.cache.set(cacheKey, { status: 'suspense-cached', value });
-            return value;
-        } catch {
-            return undefined;
-        }
-    }
-
-    // Return the cached Suspense value on all subsequent renders.
-    if (existing?.status === 'suspense-cached') {
-        return existing.value as T;
-    }
-
     if (!existing) {
         // First encounter — call fn(), which may:
-        //   (a) return a Promise<T>  — normal async usage (serialised for the client)
+        //   (a) return a Promise<T>  — async usage (serialised for the client)
         //   (b) return T synchronously — e.g. a sync data source
-        //   (c) throw a thenable     — Suspense protocol (e.g. useSuspenseQuery)
-        let result: Promise<T> | T;
-        try {
-            result = fn();
-        } catch (thrown) {
-            // (c) Suspense protocol: fn() threw a thenable. Await it, then mark the
-            // entry as 'suspense-resolved' so the next render re-calls fn() to get
-            // the synchronously available value. Not stored as 'fulfilled' → not
-            // serialised to the client (the Suspense library handles its own hydration).
-            if (thrown !== null && typeof thrown === 'object' && typeof (thrown as any).then === 'function') {
-                const suspensePromise = Promise.resolve(thrown as Promise<unknown>).then(
-                    () => { unsuspend.cache.set(cacheKey, { status: 'suspense-resolved' }); },
-                    () => { unsuspend.cache.set(cacheKey, { status: 'suspense-resolved' }); },
-                );
-                unsuspend.cache.set(cacheKey, { status: 'pending', promise: suspensePromise });
-                throw suspensePromise; // slim-react will await and retry
-            }
-            throw thrown;
-        }
+        const result = fn();
 
         const isThenable = result !== null && typeof result === 'object' && typeof (result as any).then === 'function';
 

package/src/utils/response.tsx

@@ -1,6 +1,7 @@
 import type React from "react";
 import type { AppHead, HadarsRequest, HadarsEntryBase, HadarsEntryModule, HadarsProps, AppContext } from "../types/hadars";
 import { renderToString, createElement } from '../slim-react/index';
+import { processSegmentCache } from './segmentCache';
 
 interface ReactResponseOptions {
     document: {
@@ -55,10 +56,8 @@ export const getReactResponse = async (
     req: HadarsRequest,
     opts: ReactResponseOptions,
 ): Promise<{
-    App: React.FC<any>,
-    appProps: Record<string, unknown>,
+    bodyHtml: string,
     clientProps: Record<string, unknown>,
-    unsuspend: { cache: Map<string, any> },
     status: number,
     headHtml: string,
 }> => {
@@ -78,11 +77,12 @@ export const getReactResponse = async (
     // Create per-request cache for useServerData, active for all renders.
     const unsuspend = { cache: new Map<string, any>() };
     (globalThis as any).__hadarsUnsuspend = unsuspend;
+    let bodyHtml: string;
     try {
-        let html = await renderToString(createElement(App as any, props as any));
+        bodyHtml = await renderToString(createElement(App as any, props as any));
         if (getAfterRenderProps) {
-            props = await getAfterRenderProps(props, html);
-            await renderToString(
+            props = await getAfterRenderProps(props, bodyHtml);
+            bodyHtml = await renderToString(
                 createElement(App as any, { ...props, location: req.location, context } as any),
             );
         }
@@ -103,13 +103,9 @@ export const getReactResponse = async (
         ...(Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}),
     };
 
-    const appProps = { ...props, location: req.location, context } as unknown as Record<string, unknown>;
-
     return {
-        App: App as React.FC<any>,
-        appProps,
+        bodyHtml: processSegmentCache(bodyHtml),
         clientProps: clientProps as Record<string, unknown>,
-        unsuspend,
         status: context.head.status,
         headHtml: getHeadHtml(context.head),
     };