vinext 0.1.2 → 0.1.4

package/dist/server/dev-server.js

@@ -6,6 +6,7 @@ import { NEXTJS_DEPLOYMENT_ID_HEADER } from "./headers.js";
 import { normalizeStaticPathname } from "../routing/route-pattern.js";
 import { importModule, reportRequestError } from "./instrumentation.js";
 import { buildCacheStateHeaders } from "./cache-headers.js";
+import { isUnknownRecord } from "../utils/record.js";
 import { _runWithCacheState } from "../shims/cache.js";
 import { NEVER_CACHE_CONTROL, NO_STORE_CACHE_CONTROL } from "./cache-control.js";
 import { buildMissIsrCacheControl, decideIsr } from "./isr-decision.js";
@@ -25,10 +26,12 @@ import { detectLocaleFromAcceptLanguage, extractLocaleFromUrl as extractLocaleFr
 import { buildDefaultPagesNotFoundResponse } from "./pages-default-404.js";
 import { buildPagesReadinessNextData } from "./pages-readiness.js";
 import { resolvePagesPageMethodResponse } from "./pages-page-method.js";
+import { createPagesDevModuleUrl } from "./pages-dev-module-url.js";
 import { isSerializableProps } from "./pages-serializable-props.js";
 import { loadUserDocumentInitialProps, runDocumentRenderPage } from "./pages-document-initial-props.js";
 import { callDocumentGetInitialProps } from "./document-initial-head.js";
-import { loadPagesGetInitialProps } from "./pages-get-initial-props.js";
+import { hasPagesGetInitialProps, loadDevAppInitialProps, loadPagesGetInitialProps } from "./pages-get-initial-props.js";
+import { isBotUserAgent } from "../utils/html-limited-bots.js";
 import path from "node:path";
 import React from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
@@ -60,7 +63,7 @@ async function renderIsrPassToStringAsync(element) {
 * (`buildPagesRedirectResponse`) and Next.js's `render.tsx` `__N_REDIRECT`
 * handling. See AGENTS.md "dev and prod server parity".
 */
-function writeGsspRedirect(res, redirect, isDataReq) {
+function writeGsspRedirect(res, redirect, isDataReq, props) {
 	const status = redirect.statusCode ?? (redirect.permanent ? 308 : 307);
 	let dest = redirect.destination;
 	if (!dest.startsWith("http://") && !dest.startsWith("https://")) dest = dest.replace(/^[\\/]+/, "/");
@@ -69,10 +72,14 @@ function writeGsspRedirect(res, redirect, isDataReq) {
 		const dataHeaders = { "Content-Type": "application/json" };
 		if (deploymentId) dataHeaders[NEXTJS_DEPLOYMENT_ID_HEADER] = deploymentId;
 		res.writeHead(200, dataHeaders);
-		res.end(JSON.stringify({ pageProps: {
-			__N_REDIRECT: dest,
-			__N_REDIRECT_STATUS: status
-		} }));
+		res.end(JSON.stringify({
+			...props,
+			pageProps: {
+				...isUnknownRecord(props.pageProps) ? props.pageProps : {},
+				__N_REDIRECT: dest,
+				__N_REDIRECT_STATUS: status
+			}
+		}));
 		return;
 	}
 	res.writeHead(status, { Location: dest });
@@ -94,7 +101,7 @@ const STREAM_BODY_MARKER = "<!--VINEXT_STREAM_BODY-->";
 * shell sooner).
 */
 async function streamPageToResponse(res, element, options) {
-	const { url, server, fontHeadHTML, scripts, DocumentComponent, statusCode = 200, extraHeaders, getHeadHTML, enhancePageElement, scriptNonce, documentContext, setDocumentInitialHead } = options;
+	const { url, server, fontHeadHTML, scripts, DocumentComponent, statusCode = 200, extraHeaders, getHeadHTML, enhancePageElement, scriptNonce, documentContext, setDocumentInitialHead, bufferBodyBeforeHeaders = false } = options;
 	const documentRenderPage = await runDocumentRenderPage({
 		DocumentComponent,
 		enhancePageElement,
@@ -138,6 +145,7 @@ async function streamPageToResponse(res, element, options) {
 	const markerIdx = transformedShell.indexOf(STREAM_BODY_MARKER);
 	const prefix = transformedShell.slice(0, markerIdx);
 	const suffix = transformedShell.slice(markerIdx + 25);
+	const bufferedBody = bufferBodyBeforeHeaders ? await new Response(bodyStream).text() : null;
 	const headers = {
 		"Content-Type": "text/html",
 		"Transfer-Encoding": "chunked"
@@ -146,6 +154,10 @@ async function streamPageToResponse(res, element, options) {
 	else headers[key] = val;
 	res.writeHead(statusCode, headers);
 	res.write(prefix);
+	if (bufferedBody !== null) {
+		res.end(bufferedBody + suffix);
+		return;
+	}
 	const reader = bodyStream.getReader();
 	try {
 		for (;;) {
@@ -190,12 +202,12 @@ function parseCookieLocale(req, i18nConfig) {
 * 4. Render the component to HTML
 * 5. Wrap in _document shell and send response
 */
-function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatcher, basePath = "", trailingSlash = false, hasMiddleware = false, hasRewrites = false, clientTraceMetadata) {
+function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatcher, basePath = "", trailingSlash = false, hasMiddleware = false, hasRewrites = false, clientTraceMetadata, htmlLimitedBots) {
 	const matcher = fileMatcher ?? createValidFileMatcher();
 	const pagePatterns = routes.map((r) => patternToNextFormat(r.pattern));
 	const _alsRegistration = Promise.all([runner.import("vinext/head-state"), runner.import("vinext/router-state")]);
 	_alsRegistration.catch(() => {});
-	return async (req, res, url, statusCode, isDataReq = false) => {
+	return async (req, res, url, statusCode, isDataReq = false, originalUrl = url) => {
 		const _reqStart = now();
 		let _compileEnd;
 		let _renderEnd;
@@ -245,6 +257,11 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 			return;
 		}
 		const { route, params } = match;
+		req.url = originalUrl;
+		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 userFacingParams = route.isDynamic ? params : null;
 		const query = mergeRouteParamsIntoQuery(parseQueryString(url), params);
 		return runWithRequestContext(createRequestContext(), async () => {
@@ -278,7 +295,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 					pathname: patternToNextFormat(route.pattern),
 					query,
-					asPath: url,
+					asPath: requestAsPath,
 					navigationIsReady,
 					nextData: pagesNextData,
 					locale: locale ?? currentDefaultLocale,
@@ -312,8 +329,10 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					}
 				}
 				let pageProps = {};
+				let renderProps = { pageProps };
 				let isrRevalidateSeconds = null;
 				let isFallbackRender = false;
+				let shouldPersistFallbackData = false;
 				if (typeof pageModule.getStaticPaths === "function" && route.isDynamic) {
 					const pathsResult = await pageModule.getStaticPaths({
 						locales: i18nConfig?.locales ?? [],
@@ -344,12 +363,15 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext, matcher);
 						return;
 					}
-					if (fallback === true && !isValidPath && !isDataReq) {
-						isFallbackRender = true;
-						if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
+					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) {
+						isFallbackRender = (await isrGet(pagesIsrCacheKey(url.split("?")[0])))?.value.value?.kind !== "PAGES";
+						if (isFallbackRender && typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 							pathname: patternToNextFormat(route.pattern),
 							query,
-							asPath: url,
+							asPath: requestAsPath,
 							navigationIsReady: false,
 							locale: locale ?? currentDefaultLocale,
 							locales: i18nConfig?.locales,
@@ -358,25 +380,71 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							isFallback: true
 						});
 					}
+					shouldPersistFallbackData = fallback === true && !isValidPath && isDataReq;
 				}
 				const gsspExtraHeaders = {};
+				const hasAppGetInitialProps = hasPagesGetInitialProps(AppComponent);
+				async function loadAppInitialProps() {
+					if (!hasAppGetInitialProps) return false;
+					const appResult = await loadDevAppInitialProps({
+						appComponent: AppComponent,
+						appTree: (appTreeProps) => {
+							const appTree = React.createElement(AppComponent, {
+								...appTreeProps,
+								Component: PageComponent,
+								pageProps: appTreeProps.pageProps,
+								router: routerShim.default
+							});
+							return typeof routerShim.wrapWithRouterContext === "function" ? routerShim.wrapWithRouterContext(appTree) : appTree;
+						},
+						component: PageComponent,
+						req,
+						res,
+						pathname: patternToNextFormat(route.pattern),
+						query,
+						asPath: requestAsPath,
+						locale: locale ?? currentDefaultLocale,
+						locales: i18nConfig?.locales,
+						defaultLocale: currentDefaultLocale
+					});
+					if (appResult.kind === "response-sent") return true;
+					if (appResult.kind === "render") {
+						pageProps = appResult.pageProps;
+						renderProps = appResult.renderProps;
+					}
+					return false;
+				}
 				if (typeof pageModule.getServerSideProps === "function" && !isFallbackRender) {
+					if (await loadAppInitialProps()) return;
+					renderProps = {
+						...renderProps,
+						__N_SSP: true
+					};
 					const headersBeforeGSSP = new Set(Object.keys(res.getHeaders()));
 					const context = {
 						params: userFacingParams,
 						req,
 						res,
 						query,
-						resolvedUrl: localeStrippedUrl,
+						resolvedUrl: gsspResolvedUrl,
 						locale: locale ?? currentDefaultLocale,
 						locales: i18nConfig?.locales,
 						defaultLocale: currentDefaultLocale
 					};
 					const result = await pageModule.getServerSideProps(context);
 					if (res.writableEnded) return;
-					if (result && "props" in result) pageProps = await Promise.resolve(result.props);
+					if (result && "props" in result) {
+						pageProps = {
+							...pageProps,
+							...await Promise.resolve(result.props)
+						};
+						renderProps = {
+							...renderProps,
+							pageProps
+						};
+					}
 					if (result && "redirect" in result) {
-						writeGsspRedirect(res, result.redirect, isDataReq);
+						writeGsspRedirect(res, result.redirect, isDataReq, renderProps);
 						return;
 					}
 					if (result && "notFound" in result && result.notFound) {
@@ -417,7 +485,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]);
-					if (!isOnDemandRevalidate && cached && !cached.isStale && cached.value.value?.kind === "PAGES" && !scriptNonce && !isDataReq) {
+					if (!isOnDemandRevalidate && cached && !cached.isStale && cached.value.value?.kind === "PAGES" && !cached.value.value.generatedFromDataRequest && !scriptNonce && !isDataReq) {
 						const cachedHtml = cached.value.value.html;
 						const transformedHtml = await server.transformIndexHtml(url, cachedHtml);
 						const { cacheControl: hitCacheControl } = decideIsr({
@@ -435,12 +503,84 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						res.end(transformedHtml);
 						return;
 					}
-					if (!isOnDemandRevalidate && cached && cached.isStale && cached.value.value?.kind === "PAGES" && !scriptNonce && !isDataReq) {
+					if (!isOnDemandRevalidate && cached && cached.isStale && cached.value.value?.kind === "PAGES" && !cached.value.value.generatedFromDataRequest && !scriptNonce && !isDataReq) {
 						const cachedHtml = cached.value.value.html;
 						const transformedHtml = await server.transformIndexHtml(url, cachedHtml);
 						triggerBackgroundRegeneration(cacheKey, async () => {
-							return runWithRequestContext(createRequestContext({ executionContext: null }), async () => {
+							return runWithRequestContext(createRequestContext({
+								executionContext: null,
+								ssrContext: {
+									pathname: patternToNextFormat(route.pattern),
+									query,
+									asPath: requestAsPath,
+									navigationIsReady,
+									locale: locale ?? currentDefaultLocale,
+									locales: i18nConfig?.locales,
+									defaultLocale: currentDefaultLocale
+								},
+								i18nContext: i18nConfig ? {
+									locale: locale ?? currentDefaultLocale,
+									locales: i18nConfig.locales,
+									defaultLocale: currentDefaultLocale,
+									domainLocales,
+									hostname: req.headers.host?.split(":", 1)[0]
+								} : null
+							}), async () => {
 								ensureFetchPatch();
+								let freshPageProps = {};
+								let freshRenderProps = { pageProps: freshPageProps };
+								let RegenApp = null;
+								const appPath = path.join(pagesDir, "_app");
+								if (findFileWithExtensions(appPath, matcher)) try {
+									RegenApp = (await runner.import(appPath)).default ?? null;
+								} catch {}
+								if (RegenApp && hasPagesGetInitialProps(RegenApp)) {
+									const regenReq = {
+										url: req.url,
+										headers: req.headers,
+										method: req.method
+									};
+									const regenRes = {
+										headersSent: false,
+										writableEnded: false,
+										statusCode: 200,
+										getHeaders() {
+											return {};
+										}
+									};
+									const initialProps = await loadPagesGetInitialProps(RegenApp, {
+										AppTree: (appTreeProps) => {
+											const appTree = React.createElement(RegenApp, {
+												...appTreeProps,
+												Component: pageModule.default,
+												pageProps: appTreeProps.pageProps,
+												router: routerShim.default
+											});
+											return typeof routerShim.wrapWithRouterContext === "function" ? routerShim.wrapWithRouterContext(appTree) : appTree;
+										},
+										Component: pageModule.default,
+										router: {
+											pathname: patternToNextFormat(route.pattern),
+											query,
+											asPath: requestAsPath
+										},
+										ctx: {
+											req: regenReq,
+											res: regenRes,
+											pathname: patternToNextFormat(route.pattern),
+											query,
+											asPath: requestAsPath,
+											locale: locale ?? currentDefaultLocale,
+											locales: i18nConfig?.locales,
+											defaultLocale: currentDefaultLocale
+										}
+									});
+									if (regenRes.headersSent || regenRes.writableEnded) return;
+									if (initialProps) {
+										freshRenderProps = initialProps;
+										freshPageProps = isUnknownRecord(initialProps.pageProps) ? initialProps.pageProps : {};
+									}
+								}
 								const freshResult = await pageModule.getStaticProps({
 									params: userFacingParams,
 									locale: locale ?? currentDefaultLocale,
@@ -449,13 +589,20 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 									revalidateReason: "stale"
 								});
 								if (freshResult && "props" in freshResult) {
-									const revalidate = typeof freshResult.revalidate === "number" ? freshResult.revalidate : 0;
+									const revalidate = typeof freshResult.revalidate === "number" ? freshResult.revalidate : cached.value.cacheControl?.revalidate ?? 0;
 									if (revalidate > 0) {
-										const freshProps = freshResult.props;
+										freshPageProps = {
+											...freshPageProps,
+											...freshResult.props
+										};
+										freshRenderProps = {
+											...freshRenderProps,
+											pageProps: freshPageProps
+										};
 										if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 											pathname: patternToNextFormat(route.pattern),
 											query,
-											asPath: url,
+											asPath: requestAsPath,
 											navigationIsReady,
 											locale: locale ?? currentDefaultLocale,
 											locales: i18nConfig?.locales,
@@ -473,20 +620,18 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 												hostname: req.headers.host?.split(":", 1)[0]
 											});
 										}
-										let RegenApp = null;
-										const appPath = path.join(pagesDir, "_app");
-										if (findFileWithExtensions(appPath, matcher)) try {
-											RegenApp = (await runner.import(appPath)).default ?? null;
-										} catch {}
 										let el = RegenApp ? React.createElement(RegenApp, {
+											...freshRenderProps,
 											Component: pageModule.default,
-											pageProps: freshProps
-										}) : React.createElement(pageModule.default, freshProps);
+											pageProps: freshRenderProps.pageProps,
+											router: routerShim.default
+										}) : React.createElement(pageModule.default, freshPageProps);
 										if (routerShim.wrapWithRouterContext) el = routerShim.wrapWithRouterContext(el);
 										const freshBody = await renderIsrPassToStringAsync(withScriptNonce(el, scriptNonce));
-										const viteRoot = server.config?.root;
-										const regenPageUrl = viteRoot ? "/" + path.relative(viteRoot, route.filePath) : route.filePath;
-										const regenAppUrl = RegenApp ? viteRoot ? "/" + path.relative(viteRoot, path.join(pagesDir, "_app")) : path.join(pagesDir, "_app") : null;
+										const viteRoot = server.config.root;
+										const viteBase = server.config.base;
+										const regenPageUrl = createPagesDevModuleUrl(viteRoot, route.filePath, viteBase);
+										const regenAppUrl = RegenApp ? createPagesDevModuleUrl(viteRoot, path.join(pagesDir, "_app"), viteBase) : null;
 										const freshPagesNextData = {
 											...pagesNextData,
 											__vinext: {
@@ -496,8 +641,8 @@ 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>window.__NEXT_DATA__ = ${safeJsonStringify({
-											props: { pageProps: freshProps },
+										await isrSet(cacheKey, buildPagesCacheValue(`<!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,
 											buildId: process.env.__VINEXT_BUILD_ID,
@@ -507,7 +652,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 											defaultLocale: currentDefaultLocale,
 											domainLocales,
 											...freshPagesNextData
-										})}${i18nConfig ? `;window.__VINEXT_LOCALE__=${safeJsonStringify(locale ?? currentDefaultLocale)};window.__VINEXT_LOCALES__=${safeJsonStringify(i18nConfig.locales)};window.__VINEXT_DEFAULT_LOCALE__=${safeJsonStringify(currentDefaultLocale)}` : ""}<\/script>`}\n  ${cachedHtml.match(/<script type="module">[\s\S]*?<\/script>/)?.[0] ?? ""}</body></html>`, freshProps), revalidate);
+										})}<\/script>`}\n  ${cachedHtml.match(/<script type="module">[\s\S]*?<\/script>/)?.[0] ?? ""}</body></html>`, freshRenderProps), revalidate);
 										setRevalidateDuration(cacheKey, revalidate);
 									}
 								}
@@ -539,10 +684,25 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						defaultLocale: currentDefaultLocale,
 						revalidateReason: isOnDemandRevalidate ? "on-demand" : "stale"
 					};
-					const result = await pageModule.getStaticProps(context);
-					if (result && "props" in result) pageProps = result.props;
+					const generatedPageData = !isOnDemandRevalidate && cached?.isStale === false && cached?.value.value?.kind === "PAGES" && cached.value.value.generatedFromDataRequest && isUnknownRecord(cached.value.value.pageData) ? cached.value.value.pageData : null;
+					if (!generatedPageData && await loadAppInitialProps()) return;
+					const result = generatedPageData ? null : await pageModule.getStaticProps(context);
+					if (generatedPageData) {
+						renderProps = generatedPageData;
+						pageProps = isUnknownRecord(renderProps.pageProps) ? renderProps.pageProps : {};
+					}
+					if (result && "props" in result) {
+						pageProps = {
+							...pageProps,
+							...await Promise.resolve(result.props)
+						};
+						renderProps = {
+							...renderProps,
+							pageProps
+						};
+					}
 					if (result && "redirect" in result) {
-						writeGsspRedirect(res, result.redirect, isDataReq);
+						writeGsspRedirect(res, result.redirect, isDataReq, renderProps);
 						return;
 					}
 					if (result && "notFound" in result && result.notFound) {
@@ -559,25 +719,48 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					}
 					if (result && "props" in result) isSerializableProps(patternToNextFormat(route.pattern), "getStaticProps", pageProps);
 					if (typeof result?.revalidate === "number" && result.revalidate > 0) isrRevalidateSeconds = result.revalidate;
+					else if (cached?.value.value?.kind === "PAGES" && cached.value.value.generatedFromDataRequest) isrRevalidateSeconds = cached.value.cacheControl?.revalidate ?? 31536e3;
+				}
+				if (typeof pageModule.getServerSideProps !== "function" && typeof pageModule.getStaticProps !== "function" && hasAppGetInitialProps) {
+					if (await loadAppInitialProps()) return;
 				}
-				if (typeof pageModule.getServerSideProps !== "function" && typeof pageModule.getStaticProps !== "function") {
+				if (typeof pageModule.getServerSideProps !== "function" && typeof pageModule.getStaticProps !== "function" && !hasAppGetInitialProps) {
 					const initialProps = await loadPagesGetInitialProps(PageComponent, {
 						req,
 						res,
 						pathname: patternToNextFormat(route.pattern),
 						query,
-						asPath: url,
+						asPath: requestAsPath,
 						locale: locale ?? currentDefaultLocale,
 						locales: i18nConfig?.locales,
 						defaultLocale: currentDefaultLocale
 					});
 					if (res.headersSent || res.writableEnded) return;
-					if (initialProps) pageProps = {
-						...pageProps,
-						...initialProps
-					};
+					if (initialProps) {
+						pageProps = {
+							...pageProps,
+							...initialProps
+						};
+						renderProps = {
+							...renderProps,
+							pageProps
+						};
+					}
 				}
 				if (isDataReq) {
+					if (shouldPersistFallbackData) {
+						const cacheKey = pagesIsrCacheKey(url.split("?")[0]);
+						const revalidateSeconds = isrRevalidateSeconds ?? 31536e3;
+						await isrSet(cacheKey, {
+							kind: "PAGES",
+							html: "",
+							pageData: renderProps,
+							generatedFromDataRequest: true,
+							headers: void 0,
+							status: void 0
+						}, revalidateSeconds);
+						setRevalidateDuration(cacheKey, revalidateSeconds);
+					}
 					const dataHeaders = { "Content-Type": "application/json" };
 					if (gsspExtraHeaders) for (const [k, v] of Object.entries(gsspExtraHeaders)) dataHeaders[k] = v;
 					const dataRoutePattern = patternToNextFormat(route.pattern);
@@ -586,7 +769,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						if (deploymentId) dataHeaders[NEXTJS_DEPLOYMENT_ID_HEADER] = deploymentId;
 					}
 					res.writeHead(statusCode ?? 200, dataHeaders);
-					res.end(JSON.stringify({ pageProps }));
+					res.end(JSON.stringify(renderProps));
 					_renderEnd = now();
 					return;
 				}
@@ -594,8 +777,10 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				let element;
 				const wrapWithRouterContext = routerShim.wrapWithRouterContext;
 				if (AppComponent) element = createElement(AppComponent, {
+					...renderProps,
 					Component: PageComponent,
-					pageProps
+					pageProps: renderProps.pageProps,
+					router: routerShim.default
 				});
 				else element = createElement(PageComponent, pageProps);
 				if (wrapWithRouterContext) element = wrapWithRouterContext(element);
@@ -631,8 +816,11 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				}
 				if (allFontStyles.length > 0) fontHeadHTML += `<style data-vinext-fonts${nonceAttr}>${allFontStyles.join("\n")}</style>\n  `;
 				const viteRoot = server.config.root;
-				const pageModuleUrl = "/" + path.relative(viteRoot, route.filePath);
-				const appModuleUrl = AppComponent ? "/" + path.relative(viteRoot, path.join(pagesDir, "_app")) : null;
+				const viteBase = server.config.base;
+				const pageModuleUrl = createPagesDevModuleUrl(viteRoot, route.filePath, viteBase);
+				const pageModuleSource = createPagesDevModuleUrl(viteRoot, route.filePath, "/");
+				const appModuleUrl = AppComponent ? createPagesDevModuleUrl(viteRoot, path.join(pagesDir, "_app"), viteBase) : null;
+				const appModuleSource = AppComponent ? createPagesDevModuleUrl(viteRoot, path.join(pagesDir, "_app"), "/") : null;
 				const serializedPagesNextData = {
 					...pagesNextData,
 					__vinext: {
@@ -647,11 +835,22 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 import "vinext/instrumentation-client";
 import React from "react";
 import { hydrateRoot } from "react-dom/client";
-import { installPagesRouterRuntime } from "vinext/pages-router-runtime";
-import { wrapWithRouterContext } from "next/router";
+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__;
-const { pageProps } = nextData.props;
+_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"};
 
 async function hydrate() {
   let hydrateRootOptions;
@@ -666,31 +865,41 @@ async function hydrate() {
     };
   }
 
-  const pageModule = await import("${pageModuleUrl}");
+  const pageModule = await import("${pageModuleSource}");
   const PageComponent = pageModule.default;
   let element;
-  ${appModuleUrl ? `
-  const appModule = await import("${appModuleUrl}");
+  ${appModuleSource ? `
+  const appModule = await import("${appModuleSource}");
   const AppComponent = appModule.default;
   window.__VINEXT_APP__ = AppComponent;
-  element = React.createElement(AppComponent, { Component: PageComponent, pageProps });
+  element = React.createElement(AppComponent, {
+    ...props,
+    Component: PageComponent,
+    pageProps: rawPageProps,
+    router: Router,
+  });
   ` : `
   element = React.createElement(PageComponent, pageProps);
   `}
-  element = wrapWithRouterContext(element);
+  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;
-  installPagesRouterRuntime();
+  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 nextDataScript = createInlineScriptTag(`window.__NEXT_DATA__ = ${safeJsonStringify({
-					props: { pageProps },
+				const nextDataScript = `<script id="__NEXT_DATA__" type="application/json"${nonceAttr}>${safeJsonStringify({
+					props: renderProps,
 					page: patternToNextFormat(route.pattern),
 					query: params,
 					buildId: process.env.__VINEXT_BUILD_ID,
@@ -700,7 +909,7 @@ hydrate();
 					defaultLocale: currentDefaultLocale,
 					domainLocales,
 					...serializedPagesNextData
-				})}${i18nConfig ? `;window.__VINEXT_LOCALE__=${safeJsonStringify(locale ?? currentDefaultLocale)};window.__VINEXT_LOCALES__=${safeJsonStringify(i18nConfig.locales)};window.__VINEXT_DEFAULT_LOCALE__=${safeJsonStringify(currentDefaultLocale)}` : ""}`, scriptNonce);
+				})}<\/script>`;
 				const docPath = path.join(pagesDir, "_document");
 				let DocumentComponent = null;
 				if (findFileWithExtensions(docPath, matcher)) try {
@@ -726,7 +935,7 @@ hydrate();
 					documentContext: {
 						pathname: patternToNextFormat(route.pattern),
 						query,
-						asPath: url
+						asPath: requestAsPath
 					},
 					enhancePageElement: (renderPageOpts) => {
 						let FinalApp = AppComponent;
@@ -735,6 +944,7 @@ hydrate();
 						if (renderPageOpts && typeof renderPageOpts.enhanceComponent === "function") FinalComp = renderPageOpts.enhanceComponent(FinalComp);
 						let enhancedElement;
 						if (FinalApp) enhancedElement = createElement(FinalApp, {
+							...renderProps,
 							Component: FinalComp,
 							pageProps
 						});
@@ -747,12 +957,14 @@ hydrate();
 						const traceHTML = getClientTraceMetadataHTML(clientTraceMetadata);
 						return traceHTML ? `${headHTML}\n  ${traceHTML}` : headHTML;
 					},
-					setDocumentInitialHead: typeof headShim.setDocumentInitialHead === "function" ? headShim.setDocumentInitialHead : void 0
+					setDocumentInitialHead: typeof headShim.setDocumentInitialHead === "function" ? headShim.setDocumentInitialHead : void 0,
+					bufferBodyBeforeHeaders: true
 				});
 				_renderEnd = now();
 				if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext(null);
 				if (!scriptNonce && isrRevalidateSeconds !== null && isrRevalidateSeconds > 0) {
 					let isrElement = AppComponent ? createElement(AppComponent, {
+						...renderProps,
 						Component: pageModule.default,
 						pageProps
 					}) : createElement(pageModule.default, pageProps);
@@ -767,7 +979,7 @@ hydrate();
 				reportRequestError(e instanceof Error ? e : new Error(String(e)), {
 					path: url,
 					method: req.method ?? "GET",
-					headers: Object.fromEntries(Object.entries(req.headers).map(([k, v]) => [k, Array.isArray(v) ? v.join(", ") : String(v ?? "")]))
+					headers: Object.fromEntries(Object.entries(req.headers).filter(([k]) => !k.startsWith(":")).map(([k, v]) => [k, Array.isArray(v) ? v.join(", ") : String(v ?? "")]))
 				}, {
 					routerKind: "Pages Router",
 					routePath: route.pattern,
@@ -822,41 +1034,67 @@ async function renderErrorPage(server, runner, req, res, url, pagesDir, statusCo
 		if (!wrapFn) try {
 			wrapFn = (await importModule(runner, "next/router")).wrapWithRouterContext;
 		} catch {}
-		let element;
-		if (AppComponent) element = createElement(AppComponent, {
-			Component: ErrorComponent,
-			pageProps: errorProps
-		});
-		else element = createElement(ErrorComponent, errorProps);
-		if (wrapFn) element = wrapFn(element);
-		const bodyHtml = await renderToStringAsync(element);
-		let html;
 		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();
 		if (DocumentComponent) {
-			const docProps = await loadUserDocumentInitialProps(DocumentComponent);
-			let docHtml = await renderToStringAsync(docProps ? createElement(DocumentComponent, docProps) : createElement(DocumentComponent));
-			docHtml = docHtml.replace("__NEXT_MAIN__", bodyHtml);
-			docHtml = docHtml.replace("<!-- __NEXT_SCRIPTS__ -->", "");
-			html = docHtml;
-		} else html = `<!DOCTYPE html>
+			const errorPathname = candidate === "_error" ? "/_error" : `/${candidate}`;
+			await streamPageToResponse(res, element, {
+				url,
+				server,
+				fontHeadHTML: "",
+				scripts: "",
+				DocumentComponent,
+				statusCode,
+				documentContext: {
+					err,
+					pathname: errorPathname,
+					query: parseQueryString(url),
+					asPath: url,
+					req,
+					res
+				},
+				enhancePageElement: (renderPageOpts) => {
+					let FinalApp = AppComponent;
+					let FinalComponent = ErrorComponent;
+					if (renderPageOpts.enhanceApp && FinalApp) FinalApp = renderPageOpts.enhanceApp(FinalApp);
+					if (renderPageOpts.enhanceComponent) FinalComponent = renderPageOpts.enhanceComponent(FinalComponent);
+					return createErrorElement(FinalApp, FinalComponent);
+				},
+				getHeadHTML: () => typeof headShim.getSSRHeadHTML === "function" ? headShim.getSSRHeadHTML() : "",
+				setDocumentInitialHead: typeof headShim.setDocumentInitialHead === "function" ? headShim.setDocumentInitialHead : void 0
+			});
+		} else {
+			const html = `<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
-  <div id="__next">${bodyHtml}</div>
+  <div id="__next">${await renderToStringAsync(element)}</div>
 </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" });
+			res.end(transformedHtml);
+		}
 		return;
 	} catch {
+		if (res.headersSent || res.writableEnded) return;
 		continue;
 	}
 	if (statusCode === 404) {