vike-lite-react 1.0.17 → 1.1.0

package/README.md

@@ -35,6 +35,8 @@ export default {
       // Default is `true` that enables React Hydration
       // Set to `false` for Client Takeover (SPA mode)
       hydration: true,
+      // Default is `true` that enables HTML Streaming
+      streaming: true
       // Advanced: pass options directly to the underlying @vitejs/plugin-react
       react: {
         babel: {
@@ -51,6 +53,7 @@ export default {
 | Option | Type | Default | Description
 | - | - | - | -
 | `hydration` | `boolean` | `true` | When `true`, the server renders the page to HTML and the client hydrates it (`hydrateRoot`). When `false`, the client discards the server-rendered HTML on load and mounts a fresh tree (`createRoot`) — useful for highly interactive pages where paying the hydration-mismatch tax isn't worth it.
+| `streaming` | `boolean` | `true` | When `true`, streams the server-rendered app markup via the Web Streams API (`ReadableStream`, using `react-dom/server.edge`'s `renderToReadableStream`) instead of buffering it into a single string before sending the response. Works identically on Node.js, Deno, Bun and Edge runtimes. Ignored when `hydration: false`. See [HTTP Streaming](../vike-lite/doc/differences/STREAMING.md).
 | `react` | `Options` (from `@vitejs/plugin-react`) | `{}` | Passed through to the underlying `@vitejs/plugin-react` instance. Use this for `jsxImportSource` (e.g. Emotion), custom Babel plugins, or `jsxRuntime: 'classic'`.
 
 ### 🪝 Hooks

package/dist/__internal/client/onRenderClient.mjs

@@ -1,10 +1,10 @@
 import { t as PageContextProvider } from "../../PageContextProvider-CTiW2Vsa.mjs";
 import { Component, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot, hydrateRoot } from "react-dom/client";
+import { buildInitialClientContext, buildNavigationPageContext, buildPageContextJsonUrl, consumeMatchingInitialContext, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, resolveHydrationView, tryRecoverFromStaleModuleGraph } from "vike-lite/__internal/client";
 import { matchRoute, stripBase } from "vike-lite/__internal/shared";
-import { buildInitialClientContext, buildPageContextJsonUrl, consumeMatchingInitialContext, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, resolveHydrationView, tryRecoverFromStaleModuleGraph } from "vike-lite/__internal/client";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/__internal/client/onRenderClient.tsx
+//#region src/__internal/client/RouterApp.tsx
 var RootErrorBoundary = class extends Component {
 	static getDerivedStateFromError(error) {
 		return { error };
@@ -127,19 +127,17 @@ function RouterApp(props) {
 					setCurrentPathname(stripBase(urlObjRedirect.pathname));
 					return;
 				}
-				if (ctx && (ctx.is404 || ctx.is500 || ctx.isError)) return renderErrorPage(ctx.is404, ctx.reason || "Server Error");
+				if (ctx && (ctx.is404 || ctx.is500 || ctx.isError)) return renderErrorPage(ctx.is404 ?? false, ctx.reason || "Server Error");
 				const newView = await loadViewModules(route);
 				if (signal.aborted) return;
-				setPageContext(() => ({
+				setPageContext(() => buildNavigationPageContext({
 					routeParams,
 					urlOriginal: urlObj.href,
 					urlPathname: pathname,
 					search: urlObj.search,
-					...ctx?.data && { data: ctx.data },
-					...ctx?.title && { title: ctx.title },
-					...contextOverride,
-					isClientSide: true,
-					isHydration: false
+					...ctx?.data !== void 0 ? { data: ctx.data } : {},
+					...ctx?.title ? { title: ctx.title } : {},
+					...contextOverride
 				}));
 				setView(newView);
 				if (ctx?.title) document.title = ctx.title;
@@ -170,14 +168,18 @@ function RouterApp(props) {
 		reloadTick
 	]);
 	const { Page, Layout } = view;
+	const contextValue = useMemo(() => ({
+		pageContext,
+		setPageContext
+	}), [pageContext, setPageContext]);
+	if (!Page) return null;
 	return /* @__PURE__ */ jsx(RootErrorBoundary, { children: /* @__PURE__ */ jsx(PageContextProvider, {
-		value: useMemo(() => ({
-			pageContext,
-			setPageContext
-		}), [pageContext, setPageContext]),
+		value: contextValue,
 		children: Layout ? /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Page, {}) }) : /* @__PURE__ */ jsx(Page, {})
 	}) });
 }
+//#endregion
+//#region src/__internal/client/onRenderClient.tsx
 async function onRenderClient(clientOptions) {
 	const container = document.querySelector("#root");
 	const isHydration = clientOptions.hydration && !!globalThis.__PAGE_CONTEXT__;

package/dist/__internal/server/onRenderHtml.d.mts

@@ -8,7 +8,15 @@ interface ReactRenderContext extends RenderContext {
     children: ReactNode;
   }>;
   hydration: boolean;
+  /**
+   * Stream the app markup via the Web Streams API (`ReadableStream`) instead of
+   * buffering it into a single string before sending it. Ignored in Client
+   * Takeover mode (`hydration: false`), since there's no server-rendered app
+   * markup to stream in the first place.
+   * @default false
+   */
+  streaming?: boolean;
 }
-declare function onRenderHtml({ pageContext, Page, Head, Layout, pageTitleTag, serializedContext, assets, hydration, nonce }: ReactRenderContext): string;
+declare function onRenderHtml({ pageContext, Page, Head, Layout, pageTitleTag, serializedContext, assets: { cssLinks, jsPreloads, entryClient }, hydration, streaming, nonce }: ReactRenderContext): Promise<any>;
 //#endregion
-export { ReactRenderContext, onRenderHtml };
+export { onRenderHtml };

package/dist/__internal/server/onRenderHtml.mjs

@@ -1,36 +1,57 @@
 import { t as PageContextProvider } from "../../PageContextProvider-CTiW2Vsa.mjs";
 import { jsx } from "react/jsx-runtime";
 import { renderToString } from "react-dom/server";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { renderHtmlShell, renderHtmlShellStream } from "vike-lite/__internal/server";
 //#region src/__internal/server/onRenderHtml.tsx
-function onRenderHtml({ pageContext, Page, Head, Layout, pageTitleTag, serializedContext, assets, hydration, nonce }) {
-	const { cssLinks, jsPreloads, entryClient } = assets;
-	const nonceAttr = nonce ? ` nonce="${nonce}"` : "";
+async function onRenderHtml({ pageContext, Page, Head, Layout, pageTitleTag, serializedContext, assets: { cssLinks, jsPreloads, entryClient }, hydration, streaming, nonce }) {
 	const providerValue = {
 		pageContext,
 		setPageContext: () => {}
 	};
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-${pageTitleTag}
-${cssLinks}
-${jsPreloads}
-${Head ? renderToString(/* @__PURE__ */ jsx(PageContextProvider, {
+	const headHtml = Head ? renderToString(/* @__PURE__ */ jsx(PageContextProvider, {
 		value: providerValue,
 		children: /* @__PURE__ */ jsx(Head, {})
-	})) : ""}
-<script${nonceAttr}>window.__PAGE_CONTEXT__=${serializedContext}<\/script>
-</head>
-<body>
-<div id="root" tabindex="-1">${hydration ? renderToString(/* @__PURE__ */ jsx(PageContextProvider, {
+	})) : "";
+	if (!hydration) return renderHtmlShell({
+		pageTitleTag,
+		cssLinks,
+		jsPreloads,
+		headHtml,
+		appHtml: "",
+		serializedContext,
+		entryClient,
+		nonce
+	});
+	const app = /* @__PURE__ */ jsx(PageContextProvider, {
 		value: providerValue,
 		children: Layout ? /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Page, {}) }) : /* @__PURE__ */ jsx(Page, {})
-	})) : ""}</div>
-<script type="module" src="${entryClient}"${nonceAttr}><\/script>
-</body>
-</html>`;
+	});
+	if (streaming) return renderHtmlShellStream({
+		pageTitleTag,
+		cssLinks,
+		jsPreloads,
+		headHtml,
+		appStream: await renderToReadableStream(app, {
+			nonce,
+			onError(error) {
+				console.error("[vike-lite-react] Streaming render error:", error);
+			}
+		}),
+		serializedContext,
+		entryClient,
+		nonce
+	});
+	return renderHtmlShell({
+		pageTitleTag,
+		cssLinks,
+		jsPreloads,
+		headHtml,
+		appHtml: renderToString(app),
+		serializedContext,
+		entryClient,
+		nonce
+	});
 }
 //#endregion
 export { onRenderHtml };

package/dist/index.d.mts

@@ -14,7 +14,7 @@ declare function useUrl(): URL;
 //#endregion
 //#region src/shared/globalContext.d.ts
 interface PageContextValue {
-  pageContext: PageContextClient;
+  pageContext: PageContext;
   setPageContext: (updater: (prev: PageContextClient) => PageContextClient) => void;
 }
 //#endregion

package/dist/vite.d.mts

@@ -7,11 +7,20 @@ interface VikeLiteReactOptions {
    * @default true
    */
   hydration?: boolean;
+  /**
+   * Stream the server-rendered app markup via the Web Streams API (`ReadableStream`)
+   * instead of buffering it into a single string before sending the response.
+   * Uses `react-dom/server.edge`'s `renderToReadableStream`, so it works the same
+   * way on Node.js, Deno, Bun and Edge runtimes. Ignored when `hydration: false`
+   * (Client Takeover has no server-rendered app markup to stream).
+   * @default true
+   */
+  streaming?: boolean;
   /**
    * Advanced: pass options directly to the underlying @vitejs/plugin-react.
    */
   react?: Options;
 }
-declare function vikeLiteReact({ hydration, react: reactOptions }?: VikeLiteReactOptions): Plugin[];
+declare function vikeLiteReact({ hydration, streaming, react: reactOptions }?: VikeLiteReactOptions): Plugin[];
 //#endregion
 export { VikeLiteReactOptions, vikeLiteReact as default };

package/dist/vite.mjs

@@ -1,10 +1,11 @@
 import react from "@vitejs/plugin-react";
 import { createFrameworkAdapterPlugin } from "vike-lite/__internal/vite";
 //#region src/vite.ts
-function vikeLiteReact({ hydration = true, react: reactOptions } = {}) {
+function vikeLiteReact({ hydration = true, streaming = true, react: reactOptions } = {}) {
 	const adapter = createFrameworkAdapterPlugin({
 		packageName: "vike-lite-react",
-		hydration
+		hydration,
+		streaming
 	});
 	return [...react(reactOptions), adapter];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-lite-react",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
@@ -66,15 +66,15 @@
     "jsdom": "^29.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.9",
-    "vike-lite": "1.15.15",
+    "tsdown": "^0.22.12",
+    "vike-lite": "1.16.0",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "@vitejs/plugin-react": ">=6",
-    "react": "*",
-    "react-dom": "*",
+    "react": ">=19",
+    "react-dom": ">=19",
     "vike-lite": "*",
     "vite": ">=8"
   },