hadars 0.1.29 → 0.1.30

package/dist/cli.js

@@ -141,7 +141,6 @@ var FRAGMENT_TYPE = Symbol.for("react.fragment");
 var SUSPENSE_TYPE = Symbol.for("react.suspense");
 
 // src/slim-react/jsx.ts
-var Fragment = FRAGMENT_TYPE;
 function createElement(type, props, ...children) {
   const normalizedProps = { ...props || {} };
   if (children.length === 1) {
@@ -198,10 +197,11 @@ function s() {
   }
   return g[GLOBAL_KEY];
 }
-function resetRenderState() {
+function resetRenderState(idPrefix = "") {
   const st = s();
   st.currentTreeContext = { ...EMPTY };
   st.localIdCounter = 0;
+  st.idPrefix = idPrefix;
 }
 function pushTreeContext(totalChildren, index) {
   const st = s();
@@ -265,10 +265,10 @@ function makeId() {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = "\xAB" + st.idPrefix + "R" + treeId;
+  let id = "_R_" + st.idPrefix + treeId;
   if (n > 0)
     id += "H" + n.toString(32);
-  return id + "\xBB";
+  return id + "_";
 }
 
 // src/slim-react/hooks.ts
@@ -330,8 +330,8 @@ function use(usable) {
 }
 
 // src/slim-react/dispatcher.ts
-import ReactPkg from "react";
-var _internals = ReactPkg.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+import * as ReactNS from "react";
+var _internals = ReactNS.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 var slimDispatcher = {
   useId: makeId,
   readContext: (ctx) => getContextValue(ctx),
@@ -915,8 +915,8 @@ async function renderSuspense(props, writer, isSvg = false) {
   const snap = snapshotContext();
   while (attempts < MAX_SUSPENSE_RETRIES) {
     restoreContext(snap);
+    let buffer = new BufferWriter();
     try {
-      const buffer = new BufferWriter();
       const r = renderNode(children, buffer, isSvg);
       if (r && typeof r.then === "function") {
         const m = captureMap();
@@ -950,12 +950,13 @@ async function renderSuspense(props, writer, isSvg = false) {
   }
   writer.write("<!--/$-->");
 }
-async function renderToString(element) {
+async function renderToString(element, options) {
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = /* @__PURE__ */ new Map();
   const prev = swapContextMap(contextMap);
   try {
     for (let attempt = 0; attempt < MAX_SUSPENSE_RETRIES; attempt++) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       swapContextMap(contextMap);
       const chunks = [];
       const writer = {
@@ -1072,31 +1073,14 @@ var getReactResponse = async (req, opts) => {
     location: req.location,
     ...Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}
   };
-  const ReactPage = createElement(
-    Fragment,
-    null,
-    createElement(
-      "div",
-      { id: "app" },
-      createElement(App, { ...props, location: req.location, context })
-    ),
-    createElement("script", {
-      id: "hadars",
-      type: "application/json",
-      dangerouslySetInnerHTML: {
-        __html: JSON.stringify({ hadars: { props: clientProps } }).replace(/</g, "\\u003c")
-      }
-    })
-  );
+  const appProps = { ...props, location: req.location, context };
   return {
-    ReactPage,
+    App,
+    appProps,
+    clientProps,
     unsuspend,
     status: context.head.status,
-    headHtml: getHeadHtml(context.head),
-    renderPayload: {
-      appProps: { ...props, location: req.location, context },
-      clientProps
-    }
+    headHtml: getHeadHtml(context.head)
   };
 };
 
@@ -1830,7 +1814,7 @@ var RenderWorkerPool = class {
     await Promise.all(this.workers.map((w) => w.terminate()));
   }
 };
-async function buildSsrResponse(ReactPage, headHtml, status, getPrecontentHtml, unsuspendForRender) {
+async function buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspendForRender) {
   const responseStream = new ReadableStream({
     async start(controller) {
       const [precontentHtml, postContent] = await getPrecontentHtml(headHtml);
@@ -1838,12 +1822,15 @@ async function buildSsrResponse(ReactPage, headHtml, status, getPrecontentHtml,
       let bodyHtml;
       try {
         globalThis.__hadarsUnsuspend = unsuspendForRender;
-        bodyHtml = await renderToString(ReactPage);
+        bodyHtml = await renderToString(createElement(App, appProps));
       } finally {
         globalThis.__hadarsUnsuspend = null;
       }
       bodyHtml = processSegmentCache(bodyHtml);
-      controller.enqueue(encoder.encode(bodyHtml + postContent));
+      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
+      ));
       controller.close();
     }
   });
@@ -2213,7 +2200,7 @@ var dev = async (options) => {
         getAfterRenderProps,
         getFinalProps
       } = await import(importPath);
-      const { ReactPage, unsuspend, status, headHtml } = await getReactResponse(request, {
+      const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
@@ -2222,7 +2209,7 @@ var dev = async (options) => {
           getFinalProps
         }
       });
-      return buildSsrResponse(ReactPage, headHtml, status, getPrecontentHtml, unsuspend);
+      return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
     } catch (err) {
       console.error("[hadars] SSR render error:", err);
       const msg = (err?.stack ?? err?.message ?? String(err)).replace(/</g, "&lt;");
@@ -2367,7 +2354,7 @@ var run = async (options) => {
           status: wStatus
         });
       }
-      const { ReactPage, unsuspend, status, headHtml } = await getReactResponse(request, {
+      const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
         document: {
           body: Component,
           lang: "en",
@@ -2376,7 +2363,7 @@ var run = async (options) => {
           getFinalProps
         }
       });
-      return buildSsrResponse(ReactPage, headHtml, status, getPrecontentHtml, unsuspend);
+      return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
     } catch (err) {
       console.error("[hadars] SSR render error:", err);
       return new Response("Internal Server Error", { status: 500 });

package/dist/index.cjs

@@ -183,10 +183,7 @@ function initServerDataCache(data) {
 function useServerData(key, fn) {
   const cacheKey = Array.isArray(key) ? JSON.stringify(key) : key;
   if (typeof window !== "undefined") {
-    if (clientServerDataCache.has(cacheKey)) {
-      return clientServerDataCache.get(cacheKey);
-    }
-    return fn();
+    return clientServerDataCache.get(cacheKey);
   }
   const unsuspend = globalThis.__hadarsUnsuspend;
   if (!unsuspend)

package/dist/index.d.ts

@@ -205,6 +205,9 @@ declare function initServerDataCache(data: Record<string, unknown>): void;
  *   awaited, the cache entry is then cleared so that the next render re-calls
  *   `fn()` — at that point the Suspense hook returns synchronously.
  *
+ * `fn` is **server-only**: it is never called in the browser. The resolved value
+ * is serialised into `__serverData` and returned from cache during hydration.
+ *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));
  * const post = useServerData(['post', postId], () => db.getPost(postId));

package/dist/index.js

@@ -140,10 +140,7 @@ function initServerDataCache(data) {
 function useServerData(key, fn) {
   const cacheKey = Array.isArray(key) ? JSON.stringify(key) : key;
   if (typeof window !== "undefined") {
-    if (clientServerDataCache.has(cacheKey)) {
-      return clientServerDataCache.get(cacheKey);
-    }
-    return fn();
+    return clientServerDataCache.get(cacheKey);
   }
   const unsuspend = globalThis.__hadarsUnsuspend;
   if (!unsuspend)

package/dist/slim-react/index.cjs

@@ -148,10 +148,11 @@ function s() {
   }
   return g[GLOBAL_KEY];
 }
-function resetRenderState() {
+function resetRenderState(idPrefix = "") {
   const st = s();
   st.currentTreeContext = { ...EMPTY };
   st.localIdCounter = 0;
+  st.idPrefix = idPrefix;
 }
 function pushTreeContext(totalChildren, index) {
   const st = s();
@@ -215,10 +216,10 @@ function makeId() {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = "\xAB" + st.idPrefix + "R" + treeId;
+  let id = "_R_" + st.idPrefix + treeId;
   if (n > 0)
     id += "H" + n.toString(32);
-  return id + "\xBB";
+  return id + "_";
 }
 
 // src/slim-react/hooks.ts
@@ -312,8 +313,8 @@ function createContext(defaultValue) {
 }
 
 // src/slim-react/dispatcher.ts
-var import_react = __toESM(require("react"), 1);
-var _internals = import_react.default.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+var ReactNS = __toESM(require("react"), 1);
+var _internals = ReactNS.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 var slimDispatcher = {
   useId: makeId,
   readContext: (ctx) => getContextValue(ctx),
@@ -897,8 +898,8 @@ async function renderSuspense(props, writer, isSvg = false) {
   const snap = snapshotContext();
   while (attempts < MAX_SUSPENSE_RETRIES) {
     restoreContext(snap);
+    let buffer = new BufferWriter();
     try {
-      const buffer = new BufferWriter();
       const r = renderNode(children, buffer, isSvg);
       if (r && typeof r.then === "function") {
         const m = captureMap();
@@ -932,12 +933,13 @@ async function renderSuspense(props, writer, isSvg = false) {
   }
   writer.write("<!--/$-->");
 }
-function renderToStream(element) {
+function renderToStream(element, options) {
   const encoder = new TextEncoder();
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = /* @__PURE__ */ new Map();
   return new ReadableStream({
     async start(controller) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       const prev = swapContextMap(contextMap);
       const writer = {
         lastWasText: false,
@@ -966,12 +968,13 @@ function renderToStream(element) {
     }
   });
 }
-async function renderToString(element) {
+async function renderToString(element, options) {
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = /* @__PURE__ */ new Map();
   const prev = swapContextMap(contextMap);
   try {
     for (let attempt = 0; attempt < MAX_SUSPENSE_RETRIES; attempt++) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       swapContextMap(contextMap);
       const chunks = [];
       const writer = {

package/dist/slim-react/index.d.ts

@@ -80,19 +80,27 @@ declare function createContext<T>(defaultValue: T): Context<T>;
  * until the async data is ready, then continues – exactly as requested.
  */
 
+interface RenderOptions {
+    /**
+     * Must match the `identifierPrefix` option passed to `hydrateRoot` on the
+     * client so that `useId()` generates identical IDs on server and client.
+     * Defaults to `""` (React's default).
+     */
+    identifierPrefix?: string;
+}
 /**
  * Render a component tree to a `ReadableStream<Uint8Array>`.
  *
  * The stream pauses at `<Suspense>` boundaries until the suspended
  * promise resolves, then continues writing HTML.
  */
-declare function renderToStream(element: SlimNode): ReadableStream<Uint8Array>;
+declare function renderToStream(element: SlimNode, options?: RenderOptions): ReadableStream<Uint8Array>;
 /**
  * Convenience: render to a complete HTML string.
  * Retries the full tree when a component throws a Promise (Suspense protocol),
  * so useServerData and similar hooks work without requiring explicit <Suspense>.
  */
-declare function renderToString(element: SlimNode): Promise<string>;
+declare function renderToString(element: SlimNode, options?: RenderOptions): Promise<string>;
 
 /**
  * slim-react – a lightweight, SSR-only React-compatible runtime.
@@ -179,4 +187,4 @@ declare const React: {
     version: string;
 };
 
-export { Children, Component, Context, PureComponent, SlimElement, SlimNode, Suspense, cloneElement, createContext, createElement, React as default, forwardRef, isValidElement, lazy, memo, renderToStream as renderToReadableStream, renderToStream, renderToString, startTransition, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useFormStatus, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
+export { Children, Component, Context, PureComponent, RenderOptions, SlimElement, SlimNode, Suspense, cloneElement, createContext, createElement, React as default, forwardRef, isValidElement, lazy, memo, renderToStream as renderToReadableStream, renderToStream, renderToString, startTransition, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useFormStatus, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };

package/dist/slim-react/index.js

@@ -47,10 +47,11 @@ function s() {
   }
   return g[GLOBAL_KEY];
 }
-function resetRenderState() {
+function resetRenderState(idPrefix = "") {
   const st = s();
   st.currentTreeContext = { ...EMPTY };
   st.localIdCounter = 0;
+  st.idPrefix = idPrefix;
 }
 function pushTreeContext(totalChildren, index) {
   const st = s();
@@ -114,10 +115,10 @@ function makeId() {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = "\xAB" + st.idPrefix + "R" + treeId;
+  let id = "_R_" + st.idPrefix + treeId;
   if (n > 0)
     id += "H" + n.toString(32);
-  return id + "\xBB";
+  return id + "_";
 }
 
 // src/slim-react/hooks.ts
@@ -211,8 +212,8 @@ function createContext(defaultValue) {
 }
 
 // src/slim-react/dispatcher.ts
-import ReactPkg from "react";
-var _internals = ReactPkg.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+import * as ReactNS from "react";
+var _internals = ReactNS.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 var slimDispatcher = {
   useId: makeId,
   readContext: (ctx) => getContextValue(ctx),
@@ -796,8 +797,8 @@ async function renderSuspense(props, writer, isSvg = false) {
   const snap = snapshotContext();
   while (attempts < MAX_SUSPENSE_RETRIES) {
     restoreContext(snap);
+    let buffer = new BufferWriter();
     try {
-      const buffer = new BufferWriter();
       const r = renderNode(children, buffer, isSvg);
       if (r && typeof r.then === "function") {
         const m = captureMap();
@@ -831,12 +832,13 @@ async function renderSuspense(props, writer, isSvg = false) {
   }
   writer.write("<!--/$-->");
 }
-function renderToStream(element) {
+function renderToStream(element, options) {
   const encoder = new TextEncoder();
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = /* @__PURE__ */ new Map();
   return new ReadableStream({
     async start(controller) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       const prev = swapContextMap(contextMap);
       const writer = {
         lastWasText: false,
@@ -865,12 +867,13 @@ function renderToStream(element) {
     }
   });
 }
-async function renderToString(element) {
+async function renderToString(element, options) {
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = /* @__PURE__ */ new Map();
   const prev = swapContextMap(contextMap);
   try {
     for (let attempt = 0; attempt < MAX_SUSPENSE_RETRIES; attempt++) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       swapContextMap(contextMap);
       const chunks = [];
       const writer = {

package/dist/ssr-render-worker.js

@@ -48,7 +48,6 @@ var FRAGMENT_TYPE = Symbol.for("react.fragment");
 var SUSPENSE_TYPE = Symbol.for("react.suspense");
 
 // src/slim-react/jsx.ts
-var Fragment = FRAGMENT_TYPE;
 function createElement(type, props, ...children) {
   const normalizedProps = { ...props || {} };
   if (children.length === 1) {
@@ -105,10 +104,11 @@ function s() {
   }
   return g[GLOBAL_KEY];
 }
-function resetRenderState() {
+function resetRenderState(idPrefix = "") {
   const st = s();
   st.currentTreeContext = { ...EMPTY };
   st.localIdCounter = 0;
+  st.idPrefix = idPrefix;
 }
 function pushTreeContext(totalChildren, index) {
   const st = s();
@@ -172,10 +172,10 @@ function makeId() {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = "\xAB" + st.idPrefix + "R" + treeId;
+  let id = "_R_" + st.idPrefix + treeId;
   if (n > 0)
     id += "H" + n.toString(32);
-  return id + "\xBB";
+  return id + "_";
 }
 
 // src/slim-react/hooks.ts
@@ -237,8 +237,8 @@ function use(usable) {
 }
 
 // src/slim-react/dispatcher.ts
-import ReactPkg from "react";
-var _internals = ReactPkg.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+import * as ReactNS from "react";
+var _internals = ReactNS.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 var slimDispatcher = {
   useId: makeId,
   readContext: (ctx) => getContextValue(ctx),
@@ -822,8 +822,8 @@ async function renderSuspense(props, writer, isSvg = false) {
   const snap = snapshotContext();
   while (attempts < MAX_SUSPENSE_RETRIES) {
     restoreContext(snap);
+    let buffer = new BufferWriter();
     try {
-      const buffer = new BufferWriter();
       const r = renderNode(children, buffer, isSvg);
       if (r && typeof r.then === "function") {
         const m = captureMap();
@@ -857,12 +857,13 @@ async function renderSuspense(props, writer, isSvg = false) {
   }
   writer.write("<!--/$-->");
 }
-async function renderToString(element) {
+async function renderToString(element, options) {
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = /* @__PURE__ */ new Map();
   const prev = swapContextMap(contextMap);
   try {
     for (let attempt = 0; attempt < MAX_SUSPENSE_RETRIES; attempt++) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       swapContextMap(contextMap);
       const chunks = [];
       const writer = {
@@ -1003,26 +1004,16 @@ parentPort.on("message", async (msg) => {
       return;
     const { finalAppProps, clientProps, unsuspend, headHtml, status } = await runFullLifecycle(request);
     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")
-        }
-      })
-    );
     globalThis.__hadarsUnsuspend = unsuspend;
-    let html;
+    let appHtml;
     try {
-      html = await renderToString(page);
+      appHtml = await renderToString(createElement(Component, finalAppProps));
     } finally {
       globalThis.__hadarsUnsuspend = null;
     }
-    html = processSegmentCache(html);
+    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>`;
     parentPort.postMessage({ id, html, headHtml, status });
   } catch (err) {
     parentPort.postMessage({ id, error: err?.message ?? String(err) });

package/dist/utils/Head.tsx

@@ -204,6 +204,9 @@ export function initServerDataCache(data: Record<string, unknown>) {
  *   awaited, the cache entry is then cleared so that the next render re-calls
  *   `fn()` — at that point the Suspense hook returns synchronously.
  *
+ * `fn` is **server-only**: it is never called in the browser. The resolved value
+ * is serialised into `__serverData` and returned from cache during hydration.
+ *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));
  * const post = useServerData(['post', postId], () => db.getPost(postId));
@@ -213,14 +216,9 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
     const cacheKey = Array.isArray(key) ? JSON.stringify(key) : key;
 
     if (typeof window !== 'undefined') {
-        // Client: if the server serialised a value for this key, return it directly
-        // (normal async case — no re-fetch in the browser).
-        if (clientServerDataCache.has(cacheKey)) {
-            return clientServerDataCache.get(cacheKey) as T | undefined;
-        }
-        // Key not serialised → Suspense hook case (e.g. useSuspenseQuery).
-        // Call fn() directly so the hook runs with its own hydrated cache.
-        return fn() as T | undefined;
+        // Client: if the server serialised a value for this key, return it directly.
+        // fn() is a server-only operation and must never run in the browser.
+        return clientServerDataCache.get(cacheKey) as T | undefined;
     }
 
     // Server: communicate via globalThis.__hadarsUnsuspend which is set by the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hadars",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "Minimal SSR framework for React — rspack, HMR, TypeScript, Bun/Node/Deno",
   "module": "./dist/index.js",
   "type": "module",
@@ -52,8 +52,8 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5"
   },
   "peerDependenciesMeta": {
@@ -73,6 +73,8 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "esbuild": "^0.19.12",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsup": "^6.7.0",
     "typescript": "^5.9.3"
   },

package/src/build.ts

@@ -73,7 +73,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 } from './slim-react/index';
+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,7 +194,9 @@ class RenderWorkerPool {
 }
 
 async function buildSsrResponse(
-    ReactPage: any,
+    App: any,
+    appProps: Record<string, unknown>,
+    clientProps: Record<string, unknown>,
     headHtml: string,
     status: number,
     getPrecontentHtml: (headHtml: string) => Promise<[string, string]>,
@@ -210,12 +212,15 @@ async function buildSsrResponse(
             let bodyHtml: string;
             try {
                 (globalThis as any).__hadarsUnsuspend = unsuspendForRender;
-                bodyHtml = await slimRenderToString(ReactPage);
+                bodyHtml = await slimRenderToString(createElement(App, appProps));
             } finally {
                 (globalThis as any).__hadarsUnsuspend = null;
             }
             bodyHtml = processSegmentCache(bodyHtml);
-            controller.enqueue(encoder.encode(bodyHtml + postContent));
+            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
+            ));
             controller.close();
         },
     });
@@ -685,7 +690,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
                 getFinalProps,
             } = (await import(importPath)) as HadarsEntryModule<any>;
 
-            const { ReactPage, unsuspend, status, headHtml } = await getReactResponse(request, {
+            const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
                 document: {
                     body: Component as React.FC<HadarsProps<object>>,
                     lang: 'en',
@@ -695,7 +700,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
                 },
             });
 
-            return buildSsrResponse(ReactPage, headHtml, status, getPrecontentHtml, unsuspend);
+            return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
         } catch (err: any) {
             console.error('[hadars] SSR render error:', err);
             const msg = (err?.stack ?? err?.message ?? String(err)).replace(/</g, '&lt;');
@@ -875,7 +880,7 @@ export const run = async (options: HadarsRuntimeOptions) => {
                 });
             }
 
-            const { ReactPage, unsuspend, status, headHtml } = await getReactResponse(request, {
+            const { App, appProps, clientProps, unsuspend, status, headHtml } = await getReactResponse(request, {
                 document: {
                     body: Component as React.FC<HadarsProps<object>>,
                     lang: 'en',
@@ -885,7 +890,7 @@ export const run = async (options: HadarsRuntimeOptions) => {
                 },
             });
 
-            return buildSsrResponse(ReactPage, headHtml, status, getPrecontentHtml, unsuspend);
+            return buildSsrResponse(App, appProps, clientProps, headHtml, status, getPrecontentHtml, unsuspend);
         } catch (err: any) {
             console.error('[hadars] SSR render error:', err);
             return new Response('Internal Server Error', { status: 500 });

package/src/slim-react/dispatcher.ts

@@ -9,6 +9,18 @@
  * call so that `React.useId()` routes through slim-react's tree-aware
  * `makeId()`.  All other hooks already have working SSR stubs in hooks.ts;
  * they are forwarded here so libraries that call them via `React.*` also work.
+ *
+ * In the Rspack SSR bundle `react` is aliased to `slim-react`, which does NOT
+ * export `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`.
+ * Accessing that property via a namespace import (`import * as`) always returns
+ * `undefined` safely — `import default from "react"` would crash via interop
+ * because Rspack compiles it as `require("react").default`, and slim-react has
+ * no `default` export, so `.default` itself is `undefined` and the subsequent
+ * property access throws.
+ *
+ * With the namespace import, `_internals` is `undefined` in the SSR bundle and
+ * the install/restore functions become no-ops, which is correct: the SSR bundle
+ * already routes all `React.*` hook calls to slim-react's own implementations.
  */
 
 import { makeId, getContextValue } from "./renderContext";
@@ -19,11 +31,14 @@ import {
   useOptimistic, useActionState, use,
 } from "./hooks";
 
-import ReactPkg from "react";
+// Use namespace import so that when `react` is aliased to slim-react in the
+// Rspack SSR bundle, `ReactNS` is always an object (never undefined), and
+// accessing a missing property returns `undefined` rather than throwing.
+import * as ReactNS from "react";
 
 // React 19 exposes its shared internals under this key.
 const _internals: { H: object | null } | undefined =
-  (ReactPkg as any).__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  (ReactNS as any).__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
 // The dispatcher object we install. We keep a stable reference so the same
 // object is reused across every component call.

package/src/slim-react/index.ts

@@ -75,7 +75,7 @@ export function useContext<T>(context: Context<T>): T {
 
 // ---- Rendering ----
 import { renderToStream, renderToString, renderToReadableStream } from "./render";
-export { renderToStream, renderToString, renderToReadableStream };
+export { renderToStream, renderToString, renderToReadableStream, type RenderOptions } from "./render";
 
 // ---- Suspense (as a JSX tag) ----
 import { SUSPENSE_TYPE } from "./types";

package/src/slim-react/render.ts

@@ -812,8 +812,8 @@ async function renderSuspense(
   while (attempts < MAX_SUSPENSE_RETRIES) {
     // Restore context to the state it was in when we entered <Suspense>.
     restoreContext(snap);
+    let buffer = new BufferWriter();
     try {
-      const buffer = new BufferWriter();
       const r = renderNode(children, buffer, isSvg);
       if (r && typeof (r as any).then === "function") {
         const m = captureMap(); await r; swapContextMap(m);
@@ -850,19 +850,32 @@ async function renderSuspense(
 // Public API
 // ---------------------------------------------------------------------------
 
+export interface RenderOptions {
+  /**
+   * Must match the `identifierPrefix` option passed to `hydrateRoot` on the
+   * client so that `useId()` generates identical IDs on server and client.
+   * Defaults to `""` (React's default).
+   */
+  identifierPrefix?: string;
+}
+
 /**
  * Render a component tree to a `ReadableStream<Uint8Array>`.
  *
  * The stream pauses at `<Suspense>` boundaries until the suspended
  * promise resolves, then continues writing HTML.
  */
-export function renderToStream(element: SlimNode): ReadableStream<Uint8Array> {
+export function renderToStream(
+  element: SlimNode,
+  options?: RenderOptions,
+): ReadableStream<Uint8Array> {
   const encoder = new TextEncoder();
+  const idPrefix = options?.identifierPrefix ?? "";
 
   const contextMap = new Map<object, unknown>();
   return new ReadableStream({
     async start(controller) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       const prev = swapContextMap(contextMap);
 
       const writer: Writer = {
@@ -897,12 +910,16 @@ export function renderToStream(element: SlimNode): ReadableStream<Uint8Array> {
  * Retries the full tree when a component throws a Promise (Suspense protocol),
  * so useServerData and similar hooks work without requiring explicit <Suspense>.
  */
-export async function renderToString(element: SlimNode): Promise<string> {
+export async function renderToString(
+  element: SlimNode,
+  options?: RenderOptions,
+): Promise<string> {
+  const idPrefix = options?.identifierPrefix ?? "";
   const contextMap = new Map<object, unknown>();
   const prev = swapContextMap(contextMap);
   try {
     for (let attempt = 0; attempt < MAX_SUSPENSE_RETRIES; attempt++) {
-      resetRenderState();
+      resetRenderState(idPrefix);
       swapContextMap(contextMap); // re-activate our map on each retry
       const chunks: string[] = [];
       const writer: Writer = {

package/src/slim-react/renderContext.ts

@@ -92,10 +92,11 @@ function s(): RenderState {
   return g[GLOBAL_KEY] as RenderState;
 }
 
-export function resetRenderState() {
+export function resetRenderState(idPrefix = "") {
   const st = s();
   st.currentTreeContext = { ...EMPTY };
   st.localIdCounter = 0;
+  st.idPrefix = idPrefix;
 }
 
 export function setIdPrefix(prefix: string) {
@@ -192,20 +193,19 @@ function getTreeId(): string {
 /**
  * Generate a `useId`-compatible ID for the current call site.
  *
- * Format: `«<idPrefix>R<treeId>»`  (React 19.1+)
+ * Format: `_R_<idPrefix><treeId>_`  (React 19.2+)
  *   with an optional `H<n>` suffix for the n-th useId call in the same
  *   component (matching React 19's `localIdCounter` behaviour).
  *
- * React 19.1 switched from `_R_<id>_` to `«R<id>»` (U+00AB / U+00BB).
- * This matches React 19.1's `mountId` output on the Fizz SSR renderer and
- * the client hydration path, so the IDs produced here will agree with the
- * real React runtime during `hydrateRoot`.
+ * React 19.2 uses `_R_<id>_` (underscore-delimited).
+ * This matches React 19.2's output from both renderToString (Fizz) and
+ * hydrateRoot, so SSR-generated IDs agree with client React during hydration.
  */
 export function makeId(): string {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = "\u00ab" + st.idPrefix + "R" + treeId;
+  let id = "_R_" + st.idPrefix + treeId;
   if (n > 0) id += "H" + n.toString(32);
-  return id + "\u00bb";
+  return id + "_";
 }

package/src/ssr-render-worker.ts

@@ -13,7 +13,7 @@
 import { workerData, parentPort } from 'node:worker_threads';
 import { pathToFileURL } from 'node:url';
 import { processSegmentCache } from './utils/segmentCache';
-import { renderToString, createElement, Fragment } from './slim-react/index';
+import { renderToString, createElement } from './slim-react/index';
 
 const { ssrBundlePath } = workerData as { ssrBundlePath: string };
 
@@ -145,26 +145,21 @@ parentPort!.on('message', async (msg: any) => {
 
         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).
+        // 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 html: string;
+        let appHtml: string;
         try {
-            html = await renderToString(page);
+            appHtml = await renderToString(createElement(Component, finalAppProps));
         } finally {
             (globalThis as any).__hadarsUnsuspend = null;
         }
-        html = processSegmentCache(html);
+        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>`;
 
         parentPort!.postMessage({ id, html, headHtml, status });
 

package/src/utils/Head.tsx

@@ -204,6 +204,9 @@ export function initServerDataCache(data: Record<string, unknown>) {
  *   awaited, the cache entry is then cleared so that the next render re-calls
  *   `fn()` — at that point the Suspense hook returns synchronously.
  *
+ * `fn` is **server-only**: it is never called in the browser. The resolved value
+ * is serialised into `__serverData` and returned from cache during hydration.
+ *
  * @example
  * const user = useServerData('current_user', () => db.getUser(id));
  * const post = useServerData(['post', postId], () => db.getPost(postId));
@@ -213,14 +216,9 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
     const cacheKey = Array.isArray(key) ? JSON.stringify(key) : key;
 
     if (typeof window !== 'undefined') {
-        // Client: if the server serialised a value for this key, return it directly
-        // (normal async case — no re-fetch in the browser).
-        if (clientServerDataCache.has(cacheKey)) {
-            return clientServerDataCache.get(cacheKey) as T | undefined;
-        }
-        // Key not serialised → Suspense hook case (e.g. useSuspenseQuery).
-        // Call fn() directly so the hook runs with its own hydrated cache.
-        return fn() as T | undefined;
+        // Client: if the server serialised a value for this key, return it directly.
+        // fn() is a server-only operation and must never run in the browser.
+        return clientServerDataCache.get(cacheKey) as T | undefined;
     }
 
     // Server: communicate via globalThis.__hadarsUnsuspend which is set by the

package/src/utils/response.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { AppHead, HadarsRequest, HadarsEntryBase, HadarsEntryModule, HadarsProps, AppContext } from "../types/hadars";
-import { renderToString, createElement, Fragment } from '../slim-react/index';
+import { renderToString, createElement } from '../slim-react/index';
 
 interface ReactResponseOptions {
     document: {
@@ -55,14 +55,12 @@ export const getReactResponse = async (
     req: HadarsRequest,
     opts: ReactResponseOptions,
 ): Promise<{
-    ReactPage: any,
+    App: React.FC<any>,
+    appProps: Record<string, unknown>,
+    clientProps: Record<string, unknown>,
     unsuspend: { cache: Map<string, any> },
     status: number,
     headHtml: string,
-    renderPayload: {
-        appProps: Record<string, unknown>;
-        clientProps: Record<string, unknown>;
-    };
 }> => {
     const App = opts.document.body;
     const { getInitProps, getAfterRenderProps, getFinalProps } = opts.document;
@@ -105,27 +103,14 @@ export const getReactResponse = async (
         ...(Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}),
     };
 
-    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'),
-            },
-        }),
-    );
+    const appProps = { ...props, location: req.location, context } as unknown as Record<string, unknown>;
 
     return {
-        ReactPage,
+        App: App as React.FC<any>,
+        appProps,
+        clientProps: clientProps as Record<string, unknown>,
         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>,
-        },
     };
 };