@webjsdev/server 0.8.9 → 0.8.11

package/src/ssr.js

@@ -1,10 +1,16 @@
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { resolve } from 'node:path';
-import { renderToString, isNotFound, isRedirect, lookupModuleUrl, isLazy } from '@webjsdev/core';
+import { renderToString, isNotFound, isRedirect, lookupModuleUrl, isLazy, cspNonce } from '@webjsdev/core';
 import { importMapTag, vendorIntegrityFor, publishedBuildId } from './importmap.js';
 import { jsonForScriptTag } from './script-tag-json.js';
 import { readToken, newToken, cookieHeader } from './csrf.js';
 import { transitiveDeps } from './module-graph.js';
+import { BUFFERED_MARKER, STREAM_MARKER } from './conditional-get.js';
+import {
+  readRevalidate,
+  readHtmlCache,
+  HTML_CACHE_MARKER,
+} from './html-cache.js';
 
 /**
  * SSR a matched page route to a Response.
@@ -20,14 +26,53 @@ import { transitiveDeps } from './module-graph.js';
  * @param {import('./router.js').PageRoute} route
  * @param {Record<string,string>} params
  * @param {URL} url
- * @param {{ dev: boolean, appDir: string, req?: Request, moduleGraph?: import('./module-graph.js').ModuleGraph, serverFiles?: Map<string,string> | Set<string> }} opts
+ * @param {{ dev: boolean, appDir: string, req?: Request, moduleGraph?: import('./module-graph.js').ModuleGraph, serverFiles?: Map<string,string> | Set<string>, actionData?: unknown, status?: number, pageModule?: Record<string, unknown>, cspEnabled?: boolean }} opts
  * @returns {Promise<Response>}
  */
 export async function ssrPage(route, params, url, opts) {
+  // Server HTML response cache (ISR for no-build, #241). OPT-IN: only a page
+  // that declares `export const revalidate = N` is ever cached (the page
+  // module export is the single trigger). The page module is loaded ONCE up
+  // front to read that window
+  // and is threaded back through `opts.pageModule` so renderChain reuses the
+  // same evaluation (no double-load). A cache HIT serves the stored HTML
+  // without re-running the page function. Skipped entirely (no opt-in read,
+  // no double behaviour) for the page-action re-render (actionData / a non-200
+  // status) and for a partial-nav request (X-Webjs-Have), whose bytes depend
+  // on the request and must not be shared under the full-URL key.
+  const cacheEligible =
+    !opts.actionData &&
+    !opts.status &&
+    !opts.pageModule &&
+    !(opts.req && opts.req.headers.get('x-webjs-have'));
+  let revalidateSeconds = null;
+  if (cacheEligible) {
+    try {
+      const pageMod = await loadModule(route.file, opts.dev);
+      opts = { ...opts, pageModule: pageMod };
+      revalidateSeconds = readRevalidate(pageMod);
+      if (revalidateSeconds !== null) {
+        const hit = await readHtmlCache(url);
+        if (hit) return cachedHtmlResponse(hit, opts.req, url);
+      }
+    } catch {
+      // A load / store failure falls through to a normal fresh render: the
+      // cache is an optimization, never a correctness dependency. Leave
+      // revalidateSeconds as read so the write path still applies when the
+      // page loaded but only the store lookup failed.
+    }
+  }
+
   const ctx = {
     params,
     searchParams: Object.fromEntries(url.searchParams.entries()),
     url: url.toString(),
+    // Populated only when this render is the re-render after a failed page
+    // `action` submission (#244). The page function and every layout receive
+    // it so they can surface field errors and repopulate inputs from the
+    // user's submitted values. Undefined on a normal GET render, so GET output
+    // is byte-identical to before this feature.
+    actionData: opts.actionData,
   };
 
   // Collect metadata across layouts (outermost first) then page.
@@ -46,7 +91,7 @@ export async function ssrPage(route, params, url, opts) {
     const have = haveHeader
       ? new Set(haveHeader.split(',').map((s) => s.trim()).filter(Boolean))
       : null;
-    const body = await renderChain(route, ctx, opts.dev, suspenseCtx, have);
+    const body = await renderChain(route, ctx, opts.dev, suspenseCtx, have, opts.pageModule);
     // Module URLs for the page + every layout in its chain. These ride
     // the importmap; the browser fetches each file as it walks the
     // import graph. Combined with the modulepreload hints below, this
@@ -97,17 +142,31 @@ export async function ssrPage(route, params, url, opts) {
     // shell. Either way the returned `prefix` ends just past the open <body>
     // and `closer` is the matching `</body></html>`.
     const { prefix, streamBody, closer } = buildDocumentParts(body, wrapOpts);
-    return streamingHtmlResponse(
+    const res = streamingHtmlResponse(
       prefix,
       streamBody,
       closer,
       suspenseCtx,
-      200,
+      // Normally 200. After a failed page `action` submission the caller passes
+      // 422 (or another 4xx) so the re-rendered page with field errors carries
+      // the right status for both the no-JS reload and the enhanced swap (#244).
+      opts.status || 200,
       opts.req,
       url,
       metadata,
       nonce,
     );
+    // Server HTML cache write (#241). The page opted in via `revalidate`, so
+    // FLAG this candidate for the response funnel rather than writing here: the
+    // store decision must see the FINAL response (after segment middleware,
+    // which may append a per-user Set-Cookie this code can't see yet). The
+    // funnel re-checks every guard via isCacheableResponse, writes the cache,
+    // and strips this internal marker. The CSP guard is decided here (the SSR
+    // side knows whether a nonce was stamped into the body).
+    if (revalidateSeconds !== null && !opts.cspEnabled) {
+      res.headers.set(HTML_CACHE_MARKER, String(revalidateSeconds));
+    }
+    return res;
   } catch (err) {
     if (isRedirect(err)) {
       const e = /** @type any */ (err);
@@ -117,6 +176,15 @@ export async function ssrPage(route, params, url, opts) {
       const html = await ssrNotFoundHtml(null, opts);
       return htmlResponse(html, 404, opts.req, url);
     }
+    // APM / Sentry sink (issue #239): a page render error that becomes a 500
+    // (an error.js boundary OR the default 500 page) is an unhandled error the
+    // app should see in its error tracker. Report it best-effort BEFORE
+    // rendering the boundary, so the sink gets the ORIGINAL error even if the
+    // boundary itself swallows or transforms it. notFound / redirect are
+    // sentinels (control flow), not errors, so they are excluded above.
+    if (typeof opts.onError === 'function') {
+      try { opts.onError(err); } catch { /* a throwing sink must not affect the response */ }
+    }
     // Error paths still need to honor the request's CSP nonce so the
     // error page's boot scripts (when moduleUrls is non-empty) and
     // the meta csp-nonce tag both pass strict-CSP enforcement.
@@ -185,9 +253,41 @@ function htmlResponse(html, status, req, url, metadata) {
     const secure = url ? url.protocol === 'https:' : false;
     headers.append('set-cookie', cookieHeader(newToken(), { secure }));
   }
+  // Buffered (string) body: opt into the conditional-GET funnel so a
+  // PUBLIC-cacheable page (metadata.cacheControl) gets a weak ETag + 304.
+  // The funnel still excludes the no-store default, so a private page is
+  // never ETagged. See conditional-get.js.
+  headers.set(BUFFERED_MARKER, '1');
   return new Response(html, { status, headers });
 }
 
+/**
+ * Rebuild a Response from a cached HTML record (#241). The stored body is
+ * the stable per-page HTML; the per-response varying bits are re-minted
+ * here so a new visitor still gets them: the CSRF cookie is freshly issued
+ * when the request lacks one (it is a Set-Cookie header, never part of the
+ * cached body), and the published build id is re-read so a post-deploy
+ * client sees the current id. The BUFFERED marker opts the cached body into
+ * the conditional-GET funnel exactly as a fresh render does, so a cached
+ * PUBLIC-cacheable page still 304s. Output is observably identical to the
+ * fresh render of the same route within the window.
+ *
+ * @param {{ body: string, contentType: string, cacheControl: string, status: number }} rec
+ * @param {Request | undefined} req
+ * @param {URL | undefined} url
+ */
+function cachedHtmlResponse(rec, req, url) {
+  const headers = new Headers({ 'content-type': rec.contentType });
+  headers.set('cache-control', rec.cacheControl);
+  headers.set('x-webjs-build', publishedBuildId());
+  if (req && !readToken(req)) {
+    const secure = url ? url.protocol === 'https:' : false;
+    headers.append('set-cookie', cookieHeader(newToken(), { secure }));
+  }
+  headers.set(BUFFERED_MARKER, '1');
+  return new Response(rec.body, { status: rec.status, headers });
+}
+
 /* ------------ internals ------------ */
 
 async function ssrNotFoundHtml(notFoundFile, opts) {
@@ -209,8 +309,12 @@ async function ssrNotFoundHtml(notFoundFile, opts) {
   });
 }
 
-async function renderChain(route, ctx, dev, suspenseCtx, have) {
-  const page = await loadModule(route.file, dev);
+async function renderChain(route, ctx, dev, suspenseCtx, have, pageModule) {
+  // Reuse a caller-supplied page module when present (the page-action
+  // re-render passes the exact module whose `action` just ran, so the
+  // failure re-render shares that single evaluation instead of re-importing
+  // and re-running the module's top-level side effects).
+  const page = pageModule || await loadModule(route.file, dev);
   if (!page.default) throw new Error(`Page ${route.file} must have a default export`);
   let tree = await page.default(ctx);
 
@@ -1200,9 +1304,18 @@ function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url,
   }
 
   if (!ctx.pending.length) {
+    // No pending boundaries: this degrades to a single buffered (string)
+    // flush, so opt it into the conditional-GET funnel like htmlResponse.
+    headers.set(BUFFERED_MARKER, '1');
     return new Response(prefix + bodyHtml + closer, { status, headers });
   }
 
+  // Flag a genuinely streamed body so the conditional-GET funnel skips it
+  // (an unflushed stream cannot be hashed without buffering, which would
+  // defeat streaming). The marker is internal and stripped at the funnel
+  // before the response reaches the client. See conditional-get.js.
+  headers.set(STREAM_MARKER, '1');
+
   const stream = new ReadableStream({
     async start(controller) {
       controller.enqueue(encoder.encode(prefix + bodyHtml));
@@ -1254,10 +1367,17 @@ function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url,
 }
 
 /**
+ * Import a route module. In prod the URL is stable so Node's module cache
+ * serves a single evaluation; in dev a cache-bust query forces a fresh
+ * evaluation so source edits take effect (which also re-runs the module's
+ * top-level side effects, the reason pages/layouts must keep their top level
+ * side-effect-free). Exported so page-action.js loads the page module the same
+ * way the SSR re-render does.
+ *
  * @param {string} file
  * @param {boolean} dev
  */
-async function loadModule(file, dev) {
+export async function loadModule(file, dev) {
   const url = pathToFileURL(file).toString();
   const bust = dev ? `?t=${Date.now()}-${Math.random().toString(36).slice(2)}` : '';
   return import(url + bust);
@@ -1275,26 +1395,24 @@ function toUrlPath(file, appDir) {
 }
 
 /**
- * Extract a CSP nonce from the request's Content-Security-Policy header.
- * Matches `'nonce-<base64>'` in the script-src directive.
+ * The CSP nonce for the in-flight request, or undefined if none is in
+ * scope. Delegates to `cspNonce()`, which returns the per-request nonce
+ * the handler MINTED when CSP is enabled (issue #233), or, as a fallback,
+ * the nonce parsed from an inbound `Content-Security-Policy` request
+ * header (the legacy consume-only path). Using the same source as the
+ * `Content-Security-Policy` response header is what guarantees the inline
+ * boot script, the importmap, the modulepreload hints, and the header all
+ * carry the EXACT same nonce: one minted value, no drift.
  *
- * The regex matches the first `nonce-...` token anywhere in the
- * header, regardless of which directive it sits under. This is
- * intentional: in practice every reasonable CSP uses the same
- * nonce across `script-src` and `style-src` (a per-request
- * single-nonce model), and webjs only emits `<script>` /
- * `<link rel="modulepreload">` tags, so reading the first match
- * is the right behaviour. A future caller that emits styled
- * inline content under a separate style nonce would need to
- * extend this to be directive-scoped.
+ * `req` is accepted (and ignored) so existing call sites stay unchanged;
+ * the value comes from the request-scoped AsyncLocalStorage store, not
+ * the argument.
  *
- * @param {Request} req
+ * @param {Request} [_req]
  * @returns {string | undefined}
  */
-function getNonce(req) {
-  const csp = req.headers.get('content-security-policy') || '';
-  const match = /\bnonce-([A-Za-z0-9+/=]+)/.exec(csp);
-  return match ? match[1] : undefined;
+function getNonce(_req) {
+  return cspNonce() || undefined;
 }
 
 /** @param {string} s */

package/src/vendor.js

@@ -44,7 +44,8 @@ import { readFile, readdir, writeFile, mkdir, unlink, stat, rename } from 'node:
 import { readFileSync, existsSync, realpathSync } from 'node:fs';
 import { join, dirname, basename, sep } from 'node:path';
 import { createRequire } from 'node:module';
-import { digestBase64, digestHex } from './crypto-utils.js';
+import { digestBase64 } from './crypto-utils.js';
+import { BUFFERED_MARKER } from './conditional-get.js';
 
 /**
  * Set of package names whose importmap entries are populated by the
@@ -1410,15 +1411,17 @@ export async function serveDownloadedBundle(filename, appDir, dev) {
     // match if any byte didn't round-trip exactly (e.g. invalid
     // surrogate replacement). Keep the I/O binary end-to-end.
     const body = await readFile(join(pinDir(appDir), filename));
-    // ETag for downstream caches that strip the `immutable` directive.
-    // Bundle filenames already carry the version, so content + ETag
-    // round-trip is deterministic per filename.
-    const etag = `"${(await digestHex('SHA-1', body)).slice(0, 16)}"`;
+    // Buffered (bytes) body, so opt into the conditional-GET funnel, which
+    // hashes the bytes into a weak ETag (for downstream caches that strip the
+    // `immutable` directive) and honors If-None-Match -> 304. A WEAK validator
+    // is correct here because compression may re-encode the bytes per request
+    // (RFC 7232 2.3.3); the funnel is the single source for that. See
+    // conditional-get.js.
     return new Response(body, {
       headers: {
         'content-type': 'application/javascript; charset=utf-8',
         'cache-control': dev ? 'no-cache' : 'public, max-age=31536000, immutable',
-        'etag': etag,
+        [BUFFERED_MARKER]: '1',
       },
     });
   } catch {