vinext 0.2.1 → 1.0.0-beta.1

package/dist/server/dev-server.js

@@ -1,4 +1,5 @@
 import { createRequestContext, runWithRequestContext } from "../shims/unified-request-context.js";
+import path from "../deps/.pnpm/pathslash@0.1.0/deps/pathslash/dist/index.js";
 import { createValidFileMatcher, findFileWithExtensions, findFileWithExts } from "../routing/file-matcher.js";
 import { patternToNextFormat } from "../routing/route-validation.js";
 import { matchRoute } from "../routing/pages-router.js";
@@ -32,9 +33,10 @@ import { isSerializableProps } from "./pages-serializable-props.js";
 import { isBotUserAgent } from "../utils/html-limited-bots.js";
 import { getPagesRouteParams, matchesPagesStaticPath } from "./pages-page-data.js";
 import { createPagesDevAssetUrl, createPagesDevModuleUrl } from "./pages-dev-module-url.js";
+import { createPagesDevHydrationScript } from "./pages-dev-hydration.js";
 import { getManifestFilesForModule } from "./pages-asset-tags.js";
-import { attachPagesRequestCookies, getPagesPreviewDataFromCookieHeader } from "./pages-node-compat.js";
-import path from "node:path";
+import { PAGES_PREVIEW_CACHE_CONTROL, appendPagesPreviewClearCookies, getPagesPreviewState } from "./pages-preview.js";
+import { attachPagesRequestCookies } from "./pages-node-compat.js";
 import React from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
 //#region src/server/dev-server.ts
@@ -50,10 +52,37 @@ async function renderToStringAsync(element) {
 	await stream.allReady;
 	return new Response(stream).text();
 }
+function applyDevPagesPreviewHeaders(headers, preview) {
+	const removeHeader = (name) => {
+		for (const key of Object.keys(headers)) if (key.toLowerCase() === name) delete headers[key];
+	};
+	if (preview.data !== false) {
+		removeHeader("cache-control");
+		headers["Cache-Control"] = PAGES_PREVIEW_CACHE_CONTROL;
+	}
+	if (preview.shouldClear) {
+		const clearHeaders = new Headers();
+		for (const [key, value] of Object.entries(headers)) {
+			if (key.toLowerCase() !== "set-cookie") continue;
+			if (Array.isArray(value)) for (const cookie of value) clearHeaders.append("Set-Cookie", String(cookie));
+			else clearHeaders.append("Set-Cookie", String(value));
+			delete headers[key];
+		}
+		appendPagesPreviewClearCookies(clearHeaders);
+		headers["Set-Cookie"] = clearHeaders.getSetCookie();
+	}
+}
+function applyDevPagesPreviewResponse(res, preview) {
+	const headers = res.getHeaders();
+	applyDevPagesPreviewHeaders(headers, preview);
+	for (const [name, value] of Object.entries(headers)) res.setHeader(name, value);
+}
 async function renderIsrPassToStringAsync(element) {
 	return await runWithServerInsertedHTMLState(() => runWithHeadState(() => _runWithCacheState(() => runWithPrivateCache(() => runWithFetchCache(async () => renderToStringAsync(element))))));
 }
 const DEV_STYLESHEET_ASSET_RE = /\.(?:css|scss|sass)$/i;
+const transformedStylesheetAssetsCache = /* @__PURE__ */ new WeakMap();
+const transformedStylesheetAssetsWatchers = /* @__PURE__ */ new WeakSet();
 function createDevInitialStylesheetHeadHTML(options) {
 	const { ssrManifest, moduleIds, nonceAttr } = options;
 	if (!ssrManifest || moduleIds.length === 0) return "";
@@ -71,16 +100,64 @@ function createDevInitialStylesheetHeadHTML(options) {
 	}
 	return html;
 }
-async function collectDevInitialStylesheetHeadHTML(runner, moduleIds, nonceAttr) {
+async function collectTransformedStylesheetAssets(server, moduleIds) {
+	const clientEnvironment = server.environments.client;
+	if (!clientEnvironment) return [];
+	const cachedServerAssets = transformedStylesheetAssetsCache.get(server);
+	const cache = cachedServerAssets ?? /* @__PURE__ */ new Map();
+	if (!cachedServerAssets) transformedStylesheetAssetsCache.set(server, cache);
+	if (!transformedStylesheetAssetsWatchers.has(server)) {
+		transformedStylesheetAssetsWatchers.add(server);
+		const clearCache = () => cache.clear();
+		server.watcher.on("add", clearCache);
+		server.watcher.on("change", clearCache);
+		server.watcher.on("unlink", clearCache);
+	}
+	const cacheKey = moduleIds.filter((moduleId) => Boolean(moduleId)).join("\0");
+	const cachedAssets = cache.get(cacheKey);
+	if (cachedAssets) return cachedAssets;
+	const assets = /* @__PURE__ */ new Set();
+	const seenModules = /* @__PURE__ */ new Set();
+	async function visitModule(moduleUrl) {
+		if (seenModules.has(moduleUrl)) return;
+		seenModules.add(moduleUrl);
+		try {
+			await clientEnvironment.transformRequest(moduleUrl);
+			const moduleNode = await clientEnvironment.moduleGraph.getModuleByUrl(moduleUrl);
+			if (!moduleNode) return;
+			for (const importedModule of moduleNode.importedModules) if (importedModule.type === "css" || /\.(?:css|scss|sass)(?:$|[?#])/i.test(importedModule.url)) {
+				if (importedModule.url.startsWith("//")) continue;
+				const assetUrl = importedModule.url.startsWith("\0") ? `/@id/__x00__${importedModule.url.slice(1)}${importedModule.url.includes("?") ? "&" : "?"}direct` : importedModule.url;
+				assets.add(assetUrl);
+			} else if (importedModule.type === "js") await visitModule(importedModule.url);
+		} catch {}
+	}
+	for (const moduleId of moduleIds) {
+		if (!moduleId) continue;
+		await visitModule(createPagesDevModuleUrl(server.config.root, moduleId, "/"));
+	}
+	const result = [...assets];
+	cache.set(cacheKey, result);
+	return result;
+}
+async function collectDevInitialStylesheetHeadHTML(server, runner, moduleIds, nonceAttr) {
+	let manifestHTML = "";
 	try {
-		return createDevInitialStylesheetHeadHTML({
+		manifestHTML = createDevInitialStylesheetHeadHTML({
 			ssrManifest: (await runner.import("virtual:vinext-pages-client-assets")).default?.ssrManifest,
 			moduleIds,
 			nonceAttr
 		});
-	} catch {
-		return "";
+	} catch {}
+	const transformedAssets = await collectTransformedStylesheetAssets(server, moduleIds);
+	if (transformedAssets.length === 0) return manifestHTML;
+	let html = manifestHTML;
+	for (const asset of transformedAssets) {
+		const href = asset.startsWith("/") ? asset : createPagesDevAssetUrl(asset);
+		if (html.includes(`href="${escapeHtmlAttr(href)}"`)) continue;
+		html += `<link rel="stylesheet"${nonceAttr} href="${escapeHtmlAttr(href)}" />\n  `;
 	}
+	return html;
 }
 /**
 * Emit a `getServerSideProps` / `getStaticProps` `{ redirect }` result.
@@ -180,7 +257,7 @@ async function streamPageToResponse(res, element, options) {
 	const suffix = transformedShell.slice(markerIdx + 25);
 	const bufferedBody = bufferBodyBeforeHeaders ? await new Response(bodyStream).text() : null;
 	const headers = {
-		"Content-Type": "text/html",
+		"Content-Type": "text/html; charset=utf-8",
 		"Transfer-Encoding": "chunked"
 	};
 	if (extraHeaders) for (const [key, val] of Object.entries(extraHeaders)) if (Array.isArray(val)) res.setHeader(key, val);
@@ -288,7 +365,10 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				res.end("{}");
 				return;
 			}
-			await renderErrorPage(server, runner, req, res, url, pagesDir, 404, void 0, matcher);
+			await runWithRequestContext(createRequestContext(), async () => {
+				await _alsRegistration;
+				await renderErrorPage(server, runner, req, res, url, pagesDir, 404, void 0, matcher, void 0, reactStrictMode);
+			});
 			return;
 		}
 		const { route, params } = match;
@@ -296,7 +376,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 		const parsedResolvedUrl = new URL(localeStrippedUrl, "http://vinext.local");
 		const originalRequestSearch = new URL(originalUrl, "http://vinext.local").search;
 		const gsspResolvedUrl = parsedResolvedUrl.pathname + originalRequestSearch;
-		const requestAsPath = isDataReq ? gsspResolvedUrl : originalUrl;
+		const requestAsPath = isDataReq ? gsspResolvedUrl : i18nConfig ? extractLocaleFromUrl$1(originalUrl, i18nConfig, locale).url : originalUrl;
 		const userFacingParams = route.isDynamic ? params : null;
 		const query = mergeRouteParamsIntoQuery(parseQueryString(url), params);
 		return runWithRequestContext(createRequestContext(), async () => {
@@ -316,16 +396,24 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					});
 				}
 				const pageModule = await importModule(runner, route.filePath);
+				const requestPreview = typeof pageModule.getStaticProps === "function" || typeof pageModule.getServerSideProps === "function" ? getPagesPreviewState(req.headers.cookie, { isOnDemandRevalidate: isOnDemandRevalidateRequest(req.headers[PRERENDER_REVALIDATE_HEADER]) }) : {
+					data: false,
+					shouldClear: false
+				};
+				const requestPreviewData = requestPreview.data;
 				let AppComponent = null;
 				const appPath = path.join(pagesDir, "_app");
 				if (findFileWithExtensions(appPath, matcher)) try {
 					AppComponent = (await importModule(runner, appPath)).default ?? null;
 				} catch {}
-				const pagesNextData = buildPagesReadinessNextData({
-					pageModule,
-					appComponent: AppComponent,
-					hasRewrites
-				});
+				const pagesNextData = {
+					...buildPagesReadinessNextData({
+						pageModule,
+						appComponent: AppComponent,
+						hasRewrites
+					}),
+					...requestPreviewData === false ? {} : { isPreview: true }
+				};
 				const navigationIsReady = typeof routerShim.getPagesNavigationIsReadyFromSerializedState === "function" ? routerShim.getPagesNavigationIsReadyFromSerializedState(patternToNextFormat(route.pattern), new URL(url, "http://_").search, pagesNextData) : true;
 				if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 					pathname: patternToNextFormat(route.pattern),
@@ -336,7 +424,8 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					locale: locale ?? currentDefaultLocale,
 					locales: i18nConfig?.locales,
 					defaultLocale: currentDefaultLocale,
-					domainLocales
+					domainLocales,
+					isPreview: requestPreviewData !== false
 				});
 				_compileEnd = now();
 				const PageComponent = pageModule.default;
@@ -365,10 +454,11 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				}
 				let pageProps = {};
 				let renderProps = { pageProps };
+				if (requestPreviewData !== false) renderProps.__N_PREVIEW = true;
 				let isrRevalidateSeconds = null;
 				let isFallbackRender = false;
 				let shouldPersistFallbackData = false;
-				let staticPropsPreviewData = false;
+				let staticPropsPreviewData = requestPreviewData;
 				if (typeof pageModule.getStaticPaths === "function" && route.isDynamic) {
 					const pathsResult = await pageModule.getStaticPaths({
 						locales: i18nConfig?.locales ?? [],
@@ -378,7 +468,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					const paths = pathsResult?.paths ?? [];
 					const routeParams = getPagesRouteParams(patternToNextFormat(route.pattern));
 					const isValidPath = paths.some((pathEntry) => matchesPagesStaticPath(pathEntry, params, routeParams, url));
-					if (fallback === false && !isValidPath) {
+					if (fallback === false && !isValidPath && requestPreviewData === false) {
 						if (isDataReq) {
 							const deploymentId = process.env.__VINEXT_DEPLOYMENT_ID || process.env.NEXT_DEPLOYMENT_ID;
 							const notFoundHeaders = { "Content-Type": "application/json" };
@@ -387,13 +477,13 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							res.end("{}");
 							return;
 						}
-						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext, matcher);
+						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext, matcher, void 0, reactStrictMode);
 						return;
 					}
 					const userAgentHeader = req.headers["user-agent"];
 					const userAgent = Array.isArray(userAgentHeader) ? userAgentHeader[0] : userAgentHeader;
 					const isBotRequest = !!userAgent && isBotUserAgent(userAgent, htmlLimitedBots);
-					if (fallback === true && !isValidPath && !isDataReq && !isBotRequest) {
+					if (fallback === true && !isValidPath && !isDataReq && !isBotRequest && requestPreviewData === false) {
 						isFallbackRender = (await isrGet(pagesIsrCacheKey(url.split("?")[0])))?.value.value?.kind !== "PAGES";
 						if (isFallbackRender && typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 							pathname: patternToNextFormat(route.pattern),
@@ -438,6 +528,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					if (appResult.kind === "render") {
 						pageProps = appResult.pageProps;
 						renderProps = appResult.renderProps;
+						if (requestPreviewData !== false) renderProps.__N_PREVIEW = true;
 					}
 					return false;
 				}
@@ -448,7 +539,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						__N_SSP: true
 					};
 					const headersBeforeGSSP = new Set(Object.keys(res.getHeaders()));
-					const previewData = getPagesPreviewDataFromCookieHeader(req.headers.cookie);
+					const previewData = requestPreviewData;
 					const previewContext = previewData === false ? {} : {
 						draftMode: true,
 						preview: true,
@@ -482,6 +573,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						return;
 					}
 					if (result && "notFound" in result && result.notFound) {
+						applyDevPagesPreviewResponse(res, requestPreview);
 						if (isDataReq) {
 							const deploymentId = process.env.__VINEXT_DEPLOYMENT_ID || process.env.NEXT_DEPLOYMENT_ID;
 							const notFoundHeaders = { "Content-Type": "application/json" };
@@ -490,7 +582,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							res.end("{}");
 							return;
 						}
-						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext);
+						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext, void 0, void 0, reactStrictMode);
 						return;
 					}
 					if (result && "props" in result) isSerializableProps(patternToNextFormat(route.pattern), "getServerSideProps", pageProps);
@@ -519,7 +611,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					const cacheKey = pagesIsrCacheKey(url.split("?")[0]);
 					const cached = await isrGet(cacheKey);
 					const isOnDemandRevalidate = isOnDemandRevalidateRequest(req.headers[PRERENDER_REVALIDATE_HEADER]);
-					const previewData = getPagesPreviewDataFromCookieHeader(req.headers.cookie, { isOnDemandRevalidate });
+					const previewData = requestPreviewData;
 					staticPropsPreviewData = previewData;
 					const previewContext = previewData === false ? {} : {
 						draftMode: true,
@@ -535,7 +627,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							revalidateSeconds: getRevalidateDuration(cacheKey) ?? 60
 						});
 						const hitHeaders = {
-							"Content-Type": "text/html",
+							"Content-Type": "text/html; charset=utf-8",
 							...buildCacheStateHeaders("HIT"),
 							"Cache-Control": hitCacheControl
 						};
@@ -682,7 +774,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 												hasMiddleware
 											}
 										};
-										await isrSet(cacheKey, buildPagesCacheValue(`<!DOCTYPE html><html><head></head><body><div id="__next">${freshBody}</div>${`<script id="__NEXT_DATA__" type="application/json">${safeJsonStringify({
+										const freshHtml = `<!DOCTYPE html><html><head></head><body><div id="__next">${freshBody}</div>${`<script id="__NEXT_DATA__" type="application/json">${safeJsonStringify({
 											props: freshRenderProps,
 											page: patternToNextFormat(route.pattern),
 											query: params,
@@ -693,7 +785,8 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 											defaultLocale: currentDefaultLocale,
 											domainLocales,
 											...freshPagesNextData
-										})}<\/script>`}\n  ${cachedHtml.match(/<script type="module">[\s\S]*?<\/script>/)?.[0] ?? ""}</body></html>`, freshRenderProps), revalidate);
+										})}<\/script>`}\n  ${cachedHtml.match(/<script type="module">[\s\S]*?<\/script>/)?.[0] ?? ""}</body></html>`;
+										await isrSet(cacheKey, buildPagesCacheValue(freshHtml, freshRenderProps), revalidate);
 										setRevalidateDuration(cacheKey, revalidate);
 									}
 								}
@@ -709,7 +802,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							revalidateSeconds: getRevalidateDuration(cacheKey) ?? 60
 						});
 						const staleHeaders = {
-							"Content-Type": "text/html",
+							"Content-Type": "text/html; charset=utf-8",
 							...buildCacheStateHeaders("STALE"),
 							"Cache-Control": staleCacheControl
 						};
@@ -748,6 +841,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						return;
 					}
 					if (result && "notFound" in result && result.notFound) {
+						applyDevPagesPreviewResponse(res, requestPreview);
 						if (isDataReq) {
 							const deploymentId = process.env.__VINEXT_DEPLOYMENT_ID || process.env.NEXT_DEPLOYMENT_ID;
 							const notFoundHeaders = { "Content-Type": "application/json" };
@@ -756,7 +850,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							res.end("{}");
 							return;
 						}
-						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext);
+						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext, void 0, void 0, reactStrictMode);
 						return;
 					}
 					if (result && "props" in result) isSerializableProps(patternToNextFormat(route.pattern), "getStaticProps", pageProps);
@@ -806,6 +900,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					const dataHeaders = { "Content-Type": "application/json" };
 					if ((statusCode ?? 200) === 200) dataHeaders["x-nextjs-matched-path"] = `${locale ? `/${locale}` : ""}${patternToNextFormat(route.pattern)}`;
 					if (gsspExtraHeaders) for (const [k, v] of Object.entries(gsspExtraHeaders)) dataHeaders[k] = v;
+					applyDevPagesPreviewHeaders(dataHeaders, requestPreview);
 					const dataRoutePattern = patternToNextFormat(route.pattern);
 					if (dataRoutePattern !== "/_error" && dataRoutePattern !== "/500") {
 						const deploymentId = process.env.__VINEXT_DEPLOYMENT_ID || process.env.NEXT_DEPLOYMENT_ID;
@@ -833,7 +928,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				if (typeof dynamicShim.flushPreloads === "function") await dynamicShim.flushPreloads();
 				const nonceAttr = createNonceAttribute(scriptNonce);
 				let fontHeadHTML = "";
-				const assetHeadHTML = await collectDevInitialStylesheetHeadHTML(runner, [AppComponent ? findFileWithExts(pagesDir, "_app", matcher) : null, route.filePath], nonceAttr);
+				const assetHeadHTML = await collectDevInitialStylesheetHeadHTML(server, runner, [AppComponent ? findFileWithExts(pagesDir, "_app", matcher) : null, route.filePath], nonceAttr);
 				const allFontStyles = [];
 				const allFontPreloads = [];
 				try {
@@ -874,77 +969,13 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						hasMiddleware
 					}
 				};
-				const hydrationScript = `
-<script type="module"${nonceAttr}>
-import "vinext/instrumentation-client";
-import React from "react";
-import { hydrateRoot } from "react-dom/client";
-import Router, { wrapWithRouterContext, _initializePagesRouterReadyFromNextData } from "next/router";
-
-const nextDataElement = document.getElementById("__NEXT_DATA__");
-if (nextDataElement?.textContent) {
-  window.__NEXT_DATA__ = JSON.parse(nextDataElement.textContent);
-  window.__VINEXT_LOCALE__ = window.__NEXT_DATA__.locale;
-  window.__VINEXT_LOCALES__ = window.__NEXT_DATA__.locales;
-  window.__VINEXT_DEFAULT_LOCALE__ = window.__NEXT_DATA__.defaultLocale;
-}
-const nextData = window.__NEXT_DATA__;
-_initializePagesRouterReadyFromNextData(nextData);
-const props = nextData.props && typeof nextData.props === "object" ? nextData.props : {};
-const rawPageProps = props.pageProps;
-const pageProps = rawPageProps && typeof rawPageProps === "object" ? rawPageProps : {};
-window.__VINEXT_PAGE_LOADERS__ = { [nextData.page]: () => import("${pageModuleSource}") };
-window.__VINEXT_APP_LOADER__ = ${appModuleSource ? `() => import("${appModuleSource}")` : "undefined"};
-// reactStrictMode flag — read by wrapWithRouterContext so the <React.StrictMode>
-// wrap is applied on initial hydration and every navigation (matches Next.js).
-window.__VINEXT_REACT_STRICT_MODE__ = ${JSON.stringify(reactStrictMode === true)};
-
-async function hydrate() {
-  let hydrateRootOptions;
-  if (import.meta.env.DEV) {
-    const overlay = await import("vinext/dev-error-overlay");
-    overlay.installDevErrorOverlay();
-    overlay.installViteHmrErrorHandler(import.meta.hot);
-    overlay.reportInitialDevServerErrors();
-    hydrateRootOptions = {
-      onCaughtError: overlay.devOnCaughtError,
-      onUncaughtError: overlay.devOnUncaughtError,
-    };
-  }
-
-  const pageModule = await import("${pageModuleSource}");
-  const PageComponent = pageModule.default;
-  let element;
-  ${appModuleSource ? `
-  const appModule = await import("${appModuleSource}");
-  const AppComponent = appModule.default;
-  window.__VINEXT_APP__ = AppComponent;
-  element = React.createElement(AppComponent, {
-    ...props,
-    Component: PageComponent,
-    pageProps: rawPageProps,
-    router: Router,
-  });
-  ` : `
-  element = React.createElement(PageComponent, pageProps);
-  `}
-  let resolveHydrationCommit;
-  const hydrationCommitted = new Promise((resolve) => { resolveHydrationCommit = resolve; });
-  element = wrapWithRouterContext(element, resolveHydrationCommit);
-  const root = hydrateRoot(document.getElementById("__next"), element, hydrateRootOptions);
-  window.__VINEXT_ROOT__ = root;
-  await hydrationCommitted;
-  const hydratedAt = performance.now();
-  window.__VINEXT_HYDRATED_AT = hydratedAt;
-  window.__NEXT_HYDRATED = true;
-  window.__NEXT_HYDRATED_AT = hydratedAt;
-  window.__NEXT_HYDRATED_CB?.();
-  if (nextData.isFallback) {
-    await Router.replace(window.location.pathname + window.location.search + window.location.hash, undefined, { _h: 1, scroll: false });
-  }
-}
-hydrate();
-<\/script>`;
+				const hydrationScript = createPagesDevHydrationScript({
+					appModuleSource,
+					pageModuleSource,
+					reactStrictMode: reactStrictMode === true,
+					replaceFallbackRoute: true,
+					scriptNonce
+				});
 				const nextDataScript = `<script id="__NEXT_DATA__" type="application/json"${nonceAttr}>${safeJsonStringify({
 					props: renderProps,
 					page: patternToNextFormat(route.pattern),
@@ -964,11 +995,12 @@ hydrate();
 				} catch {}
 				const allScripts = `${nextDataScript}\n  ${createInlineScriptTag(`window.__VINEXT_PAGE_PATTERNS__=${safeJsonStringify(pagePatterns)}`, scriptNonce)}\n  ${hydrationScript}`;
 				const extraHeaders = { ...gsspExtraHeaders };
-				if (isrRevalidateSeconds) if (scriptNonce) extraHeaders["Cache-Control"] = NO_STORE_CACHE_CONTROL;
+				if (requestPreviewData === false && isrRevalidateSeconds) if (scriptNonce) extraHeaders["Cache-Control"] = NO_STORE_CACHE_CONTROL;
 				else {
 					extraHeaders["Cache-Control"] = buildMissIsrCacheControl(isrRevalidateSeconds);
 					Object.assign(extraHeaders, buildCacheStateHeaders("MISS"));
 				}
+				applyDevPagesPreviewHeaders(extraHeaders, requestPreview);
 				if (allFontPreloads.length > 0) extraHeaders["Link"] = allFontPreloads.map((p) => `<${p.href}>; rel=preload; as=font; type=${p.type}; crossorigin`).join(", ");
 				await streamPageToResponse(res, withScriptNonce(element, scriptNonce), {
 					url,
@@ -1038,7 +1070,7 @@ hydrate();
 					routeType: "render"
 				}).catch(() => {});
 				try {
-					await renderErrorPage(server, runner, req, res, url, pagesDir, 500, void 0, matcher, e instanceof Error ? e : new Error(String(e)));
+					await renderErrorPage(server, runner, req, res, url, pagesDir, 500, void 0, matcher, e instanceof Error ? e : new Error(String(e)), reactStrictMode);
 				} catch (fallbackErr) {
 					res.statusCode = 500;
 					res.end(`Internal Server Error: ${fallbackErr.message}`);
@@ -1055,71 +1087,127 @@ hydrate();
 * - 500: pages/500.tsx -> pages/_error.tsx -> default
 * - other: pages/_error.tsx -> default
 */
-async function renderErrorPage(server, runner, req, res, url, pagesDir, statusCode, wrapWithRouterContext, fileMatcher, err) {
+async function renderErrorPage(server, runner, req, res, url, pagesDir, statusCode, wrapWithRouterContext, fileMatcher, err, reactStrictMode = false) {
 	attachPagesRequestCookies(req);
 	const matcher = fileMatcher ?? createValidFileMatcher();
 	const candidates = statusCode === 404 ? ["404", "_error"] : statusCode === 500 ? ["500", "_error"] : ["_error"];
-	for (const candidate of candidates) try {
-		const errorAssetPath = findFileWithExts(pagesDir, candidate, matcher);
-		if (!errorAssetPath) continue;
-		const ErrorComponent = (await importModule(runner, errorAssetPath)).default;
-		if (!ErrorComponent) continue;
-		let AppComponent = null;
-		const appPathErr = path.join(pagesDir, "_app");
-		const appAssetPath = findFileWithExts(pagesDir, "_app", matcher);
-		if (findFileWithExtensions(appPathErr, matcher)) try {
-			AppComponent = (await importModule(runner, appAssetPath ?? appPathErr)).default ?? null;
-		} catch {}
-		const createElement = React.createElement;
-		const initialErrorProps = await loadPagesGetInitialProps(ErrorComponent, {
-			req,
-			res,
-			err,
-			pathname: candidate === "_error" ? "/_error" : `/${candidate}`,
-			query: parseQueryString(url),
-			asPath: url
-		});
-		if (res.headersSent || res.writableEnded) return;
-		const errorProps = {
-			...initialErrorProps,
-			statusCode
-		};
-		let wrapFn = wrapWithRouterContext;
-		if (!wrapFn) try {
-			wrapFn = (await importModule(runner, "next/router")).wrapWithRouterContext;
-		} catch {}
-		let DocumentComponent = null;
-		const docPathErr = path.join(pagesDir, "_document");
-		if (findFileWithExtensions(docPathErr, matcher)) try {
-			DocumentComponent = (await importModule(runner, docPathErr)).default ?? null;
-		} catch {}
-		const createErrorElement = (FinalApp, FinalComponent) => {
-			let errorElement = FinalApp ? createElement(FinalApp, {
-				Component: FinalComponent,
-				pageProps: errorProps
-			}) : createElement(FinalComponent, errorProps);
-			if (wrapFn) errorElement = wrapFn(errorElement);
-			return errorElement;
-		};
-		const element = createErrorElement(AppComponent, ErrorComponent);
-		const headShim = await importModule(runner, "next/head");
-		if (typeof headShim.resetSSRHead === "function") headShim.resetSSRHead();
-		const responseHeaders = typeof res.getHeaders === "function" ? res.getHeaders() : void 0;
-		const nonceAttr = createNonceAttribute(getScriptNonceFromNodeHeaderSources(req.headers, responseHeaders));
-		const assetHeadHTML = await collectDevInitialStylesheetHeadHTML(runner, [appAssetPath, errorAssetPath], nonceAttr);
-		if (DocumentComponent) {
-			const errorPathname = candidate === "_error" ? "/_error" : `/${candidate}`;
-			await streamPageToResponse(res, element, {
+	for (const candidate of candidates) {
+		let errorRouterShim = null;
+		try {
+			const errorAssetPath = findFileWithExts(pagesDir, candidate, matcher);
+			if (!errorAssetPath && candidate !== "_error") continue;
+			const ErrorComponent = (await importModule(runner, errorAssetPath ?? "next/error")).default;
+			if (!ErrorComponent) continue;
+			let AppComponent = null;
+			const appPathErr = path.join(pagesDir, "_app");
+			const appAssetPath = findFileWithExts(pagesDir, "_app", matcher);
+			if (findFileWithExtensions(appPathErr, matcher)) try {
+				AppComponent = (await importModule(runner, appAssetPath ?? appPathErr)).default ?? null;
+			} catch {}
+			const createElement = React.createElement;
+			res.statusCode = statusCode;
+			const errorPage = candidate === "_error" ? "/_error" : `/${candidate}`;
+			const errorRouter = {
+				pathname: errorPage,
+				query: parseQueryString(url),
+				asPath: url
+			};
+			try {
+				errorRouterShim = await importModule(runner, "next/router");
+				if (typeof errorRouterShim.setSSRContext === "function") errorRouterShim.setSSRContext({
+					...errorRouter,
+					navigationIsReady: true
+				});
+			} catch {}
+			const serverRouter = errorRouterShim?.default ?? errorRouter;
+			const wrapFn = wrapWithRouterContext ?? errorRouterShim?.wrapWithRouterContext;
+			const initialErrorProps = await loadPagesGetInitialProps(ErrorComponent, {
+				req,
+				res,
+				err,
+				pathname: errorPage,
+				query: errorRouter.query,
+				asPath: url
+			});
+			if (res.headersSent || res.writableEnded) return;
+			const errorProps = {
+				...initialErrorProps,
+				statusCode
+			};
+			let renderProps;
+			if (AppComponent && hasPagesGetInitialProps(AppComponent)) {
+				const appInitialProps = await loadPagesGetInitialProps(AppComponent, {
+					AppTree: (appTreeProps) => {
+						const appTree = createElement(AppComponent, {
+							...appTreeProps,
+							Component: ErrorComponent,
+							router: serverRouter
+						});
+						return wrapFn ? wrapFn(appTree) : appTree;
+					},
+					Component: ErrorComponent,
+					router: serverRouter,
+					ctx: {
+						req,
+						res,
+						err,
+						pathname: errorPage,
+						query: errorRouter.query,
+						asPath: url
+					}
+				});
+				if (res.headersSent || res.writableEnded) return;
+				renderProps = appInitialProps ?? {};
+			} else renderProps = { pageProps: errorProps };
+			let DocumentComponent = null;
+			const docPathErr = path.join(pagesDir, "_document");
+			if (findFileWithExtensions(docPathErr, matcher)) try {
+				DocumentComponent = (await importModule(runner, docPathErr)).default ?? null;
+			} catch {}
+			const createErrorElement = (FinalApp, FinalComponent) => {
+				let errorElement = FinalApp ? createElement(FinalApp, {
+					...renderProps,
+					Component: FinalComponent,
+					router: serverRouter
+				}) : createElement(FinalComponent, errorProps);
+				if (wrapFn) errorElement = wrapFn(errorElement);
+				return errorElement;
+			};
+			const element = createErrorElement(AppComponent, ErrorComponent);
+			const headShim = await importModule(runner, "next/head");
+			if (typeof headShim.resetSSRHead === "function") headShim.resetSSRHead();
+			const responseHeaders = typeof res.getHeaders === "function" ? res.getHeaders() : void 0;
+			const scriptNonce = getScriptNonceFromNodeHeaderSources(req.headers, responseHeaders);
+			const nonceAttr = createNonceAttribute(scriptNonce);
+			const assetHeadHTML = await collectDevInitialStylesheetHeadHTML(server, runner, [appAssetPath, errorAssetPath], nonceAttr);
+			const errorModuleSource = errorAssetPath ? createPagesDevModuleUrl(server.config.root, errorAssetPath, "/") : "next/error";
+			const appModuleSource = appAssetPath ? createPagesDevModuleUrl(server.config.root, appAssetPath, "/") : null;
+			const errorScripts = `${`<script id="__NEXT_DATA__" type="application/json"${nonceAttr}>${safeJsonStringify({
+				props: renderProps,
+				page: errorPage,
+				query: parseQueryString(url),
+				buildId: process.env.__VINEXT_BUILD_ID,
+				isFallback: false
+			})}<\/script>`}\n${createPagesDevHydrationScript({
+				appModuleSource,
+				forceRouterReady: true,
+				normalizePageProps: false,
+				pageModuleSource: errorModuleSource,
+				reactStrictMode: reactStrictMode === true,
+				scriptNonce,
+				setPagePatternsFromNextData: true
+			})}`;
+			if (DocumentComponent) await streamPageToResponse(res, element, {
 				url,
 				server,
 				fontHeadHTML: "",
 				assetHeadHTML,
-				scripts: "",
+				scripts: errorScripts,
 				DocumentComponent,
 				statusCode,
 				documentContext: {
 					err,
-					pathname: errorPathname,
+					pathname: errorPage,
 					query: parseQueryString(url),
 					asPath: url,
 					req,
@@ -1135,8 +1223,8 @@ async function renderErrorPage(server, runner, req, res, url, pagesDir, statusCo
 				getHeadHTML: () => typeof headShim.getSSRHeadHTML === "function" ? headShim.getSSRHeadHTML() : "",
 				setDocumentInitialHead: typeof headShim.setDocumentInitialHead === "function" ? headShim.setDocumentInitialHead : void 0
 			});
-		} else {
-			const html = `<!DOCTYPE html>
+			else {
+				const html = `<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
@@ -1145,16 +1233,20 @@ async function renderErrorPage(server, runner, req, res, url, pagesDir, statusCo
 </head>
 <body>
   <div id="__next">${await renderToStringAsync(element)}</div>
+  ${errorScripts}
 </body>
 </html>`;
-			const transformedHtml = await server.transformIndexHtml(url, html);
-			res.writeHead(statusCode, { "Content-Type": "text/html" });
-			res.end(transformedHtml);
+				const transformedHtml = await server.transformIndexHtml(url, html);
+				res.writeHead(statusCode, { "Content-Type": "text/html; charset=utf-8" });
+				res.end(transformedHtml);
+			}
+			return;
+		} catch {
+			if (res.headersSent || res.writableEnded) return;
+			continue;
+		} finally {
+			if (typeof errorRouterShim?.setSSRContext === "function") errorRouterShim.setSSRContext(null);
 		}
-		return;
-	} catch {
-		if (res.headersSent || res.writableEnded) return;
-		continue;
 	}
 	if (statusCode === 404) {
 		const defaultResponse = buildDefaultPagesNotFoundResponse();