Build time, request time, and the client

import { connection } from 'next/server'
export async function PriceAsOf() {  // Without this line the build fails: new Date() cannot suspend, so the  // prerender would bake a build-time clock into a static artifact.  await connection()  return <p>Prices as of <time>{new Date().toLocaleTimeString('en-US')}</time></p>}

// antipattern: four values that cannot suspend. Each would be computed once// during the prerender and served to every visitor for the life of the// deployment. Extract-only; never compiled.export function Variants() {  const a = new Date() // build-time clock, frozen  const b = Date.now() // same, as a number  const c = Math.random() // one "random" value for everyone  const d = crypto.randomUUID() // one "unique" id for everyone  return <pre>{String([a, b, c, d])}</pre>}

# produced: 2026-08-10; next@16.3.0; command: unique scratch routes per primitive; pnpm build each; remove scratch### new Date()route: /scratch-s6-datebuild exit: 1caught: trueerror names unstable value: new Date()Error: Route "/scratch-s6-date": Next.js encountered the unstable value `new Date()` while prerendering.This value can change between renders, so it must be either prerendered or computed later.Ways to fix this:  - [dynamic] Render at request time by adding a dynamic data access (e.g. `await connection()`) before this call  - [cache] Prerender and cache the value with `"use cache"`  - [client] Render the value on the client with `"use client"`  - [measure] If the value is for telemetry, use a timing API such as `performance.now()`Learn more: https://nextjs.org/docs/messages/blocking-prerender-current-time---### Date.now()route: /scratch-s6-nowbuild exit: 1caught: trueerror names unstable value: Date.now()Error: Route "/scratch-s6-now": Next.js encountered the unstable value `Date.now()` while prerendering.This value can change between renders, so it must be either prerendered or computed later.Ways to fix this:  - [dynamic] Render at request time by adding a dynamic data access (e.g. `await connection()`) before this call  - [cache] Prerender and cache the value with `"use cache"`  - [client] Render the value on the client with `"use client"`  - [measure] If the value is for telemetry, use a timing API such as `performance.now()`Learn more: https://nextjs.org/docs/messages/blocking-prerender-current-time---### Math.random()route: /scratch-s6-randombuild exit: 1caught: trueerror names unstable value: Math.random()Error: Route "/scratch-s6-random": Next.js encountered the unstable value `Math.random()` while prerendering.This value can change between renders, so it must be either prerendered or computed later.Ways to fix this:  - [dynamic] Render at request time by adding a dynamic data access (e.g. `await connection()`) before this call  - [cache] Prerender and cache the value with `"use cache"`  - [client] Render the value on the client with `"use client"`Learn more: https://nextjs.org/docs/messages/blocking-prerender-random---### crypto.randomUUID()route: /scratch-s6-uuidbuild exit: 1caught: trueerror names unstable value: crypto.randomUUID()Error: Route "/scratch-s6-uuid": Next.js encountered the unstable value `crypto.randomUUID()` while prerendering.This value can change between renders, so it must be either prerendered or computed later.Ways to fix this:  - [dynamic] Render at request time by adding a dynamic data access (e.g. `await connection()`) before this call  - [cache] Prerender and cache the value with `"use cache"`  - [client] Render the value on the client with `"use client"`Learn more: https://nextjs.org/docs/messages/blocking-prerender-crypto---# summary: all four primitives caught; none silently baked into the shell

# produced: 2026-08-10; next@16.3.0; command: comment out await connection() in app/products/[slug]/price-as-of.tsx then pnpm buildError: Route "/products/[slug]": Next.js encountered the unstable value `new Date()` while prerendering.This value can change between renders, so it must be either prerendered or computed later.Ways to fix this:  - [dynamic] Render at request time by adding a dynamic data access (e.g. `await connection()`) before this callLearn more: https://nextjs.org/docs/messages/blocking-prerender-current-timeError occurred prerendering page "/products/aeron-chair". Read more: https://nextjs.org/docs/messages/prerender-errorExport encountered an error on /products/[slug]/page: /products/aeron-chair, exiting the build.

import { cacheLife } from 'next/cache'import { db } from './db'
/** * Legal — and a trap. The cache entry has an honest creation time, so * new Date() builds and runs here. The value freezes at entry creation and * is wrong for every later reader who treats it as "now." */export async function getStamped() {  'use cache'  cacheLife('minutes')  return { at: new Date().toISOString(), data: await db.report.summary() }}

# produced: 2026-08-10; next@16.3.0; command: scratch-s6-cached-date getStamped() with new Date() inside 'use cache'; build; two curls 2.5s apart; remove scratchbuilds: truebuild exit: 0Route (app)                    Revalidate  Expire├ ○ /scratch-s6-cached-date            1m      1h○  (Static)             prerendered as static content---runs: truerequest1 at: 2026-08-10T07:18:51.289Z (len=7222)request2 at (2.5s later): 2026-08-10T07:18:51.289Z (len=7222)same timestamp (frozen at entry creation): truesnippet1: <main><p data-at="2026-08-10T07:18:51.289Z">2026-08-10T07:18:51.289Z</p><p>2026-W32</p></main>

// antipattern: instant = false permits a segment to BLOCK. It says nothing// about whether a value can be computed ahead of a request. A latency// opt-out cannot resolve a correctness failure. Extract-only.export const instant = false
export default function Page() {  return <time>{new Date().toISOString()}</time>}

# produced: 2026-08-10; next@16.3.0; command: scratch-s6-instant with instant=false + bare new Date(); pnpm build; remove scratchbuild exit: 1clears sync-IO error (exit 0): falseError: Route "/scratch-s6-instant": Next.js encountered the unstable value `new Date()` while prerendering.This value can change between renders, so it must be either prerendered or computed later.Ways to fix this:  - [dynamic] Render at request time by adding a dynamic data access (e.g. `await connection()`) before this call  - [cache] Prerender and cache the value with `"use cache"`  - [client] Render the value on the client with `"use client"`  - [measure] If the value is for telemetry, use a timing API such as `performance.now()`Learn more: https://nextjs.org/docs/messages/blocking-prerender-current-timeExport encountered an error on /scratch-s6-instant/page: /scratch-s6-instant, exiting the build.

# produced: 2026-08-10; next@16.3.0; command: scratch route app/scratch-s6-bare-connection with bare await connection() at page root (no Suspense, no instant=false); next dev --port 3020 + curl; then next build; remove scratch
=== DEV (next dev) ===HTTP status line: HTTP/1.1 200 OKresponse body length: 11706diagnostic present in HTML body: falsedev-log label: the line starts with "Error:" — not "Insight", not "Warning"dev-log lines of interest: GET /scratch-s6-bare-connection 200 in 10.0s (next.js: 9.6s, application-code: 372ms)Error: Route "/scratch-s6-bare-connection": Next.js encountered uncached data during prerendering.Learn more: https://nextjs.org/docs/messages/blocking-prerender-dynamic    at Page (app\scratch-s6-bare-connection\page.tsx:4:19)
=== BUILD (next build) ===build exit: 1failure output:Error: Route "/scratch-s6-bare-connection": Next.js encountered uncached or runtime data during prerendering.
`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.
Ways to fix this:  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)  - [block] Set `export const instant = false` to allow a blocking route
Learn more: https://nextjs.org/docs/messages/blocking-prerender-dynamicError occurred prerendering page "/scratch-s6-bare-connection". Read more: https://nextjs.org/docs/messages/prerender-errorExport encountered an error on /scratch-s6-bare-connection/page: /scratch-s6-bare-connection, exiting the build.
# note: same diagnostic id (blocking-prerender-dynamic). Dev serves 200; build exits 1. The log prefix is "Error:" in both; docs still call the non-fatal-in-dev presentation an "insight."

import { Suspense } from 'react'import { after, connection } from 'next/server'import { recordView } from '@/lib/audit'
export default function AfterDemoPage() {  return (    <main>      <Suspense fallback={<p aria-busy="true">Sending…</p>}>        <AfterBody />      </Suspense>    </main>  )}
async function AfterBody() {  await connection()  const queuedAt = Date.now()
  // Scheduled now, executed after the response has been sent. The 300ms  // write does not appear in the visitor's total.  after(() => recordView('/after-demo', queuedAt))
  console.log(`[render] /after-demo responded at ${Date.now()}`)
  return <h1>Response sent; audit still pending.</h1>}

# produced: 2026-08-10; next@16.3.0; command: next start --port 3016; curl -w time_total http://localhost:3016/after-demo--- curl ---time_total_s: 0.243474(html body omitted; 200 OK)--- server log lines of interest ---[render] /after-demo responded at 1786346353584[audit] /after-demo viewed, queued at 1786346353584, written at 1786346354020--- claim ---visitor time_total << 0.300s: trueaudit delay (written - queued): 436msvisitor time_total should be << 300ms audit delay if after() is post-response

'use client'
// client: reads a value that only exists in a browserimport { useEffect, useState } from 'react'
export function ClientTimeSection() {  const [at, setAt] = useState<string | null>(null)
  // Runs after hydration, never on the server. The null first render is  // what the server sends and what the client must agree with.  useEffect(() => {    setAt(new Date().toISOString())  }, [])
  return (    <section>      <h2>Client time</h2>      <p>{at ? <>Hydrated at <time>{at}</time></> : 'Not hydrated yet'}</p>      <p>        Viewport:{' '}        {typeof window === 'undefined'          ? 'unknown on the server'          : `${window.innerWidth}px`}      </p>    </section>  )}

import { Suspense } from 'react'import { BuildTimeSection, RequestTimeSection } from './sections'import { ClientTimeSection } from './client-section'
export default function WhenPage() {  return (    <main>      <BuildTimeSection />
      <Suspense fallback={<p aria-busy="true">Waiting for a request…</p>}>        <RequestTimeSection />      </Suspense>
      <ClientTimeSection />    </main>  )}

import { getStaticFacts } from '@/lib/when'import { formatPrice } from '@/lib/db'
/** * BUILD TIME. Cached, so it resolves during the prerender and lands in the * shell. It deliberately displays no timestamp — a value describing when * this ran would be baked into a static artifact and wrong for every * visitor after the first. That absence is the lesson. */export async function BuildTimeSection() {  const facts = await getStaticFacts()  return (    <section>      <h2>Build time</h2>      <p>{formatPrice(facts.totalCents)} — same for every visitor this hour.</p>    </section>  )}

import { connection } from 'next/server'
/** * REQUEST TIME. connection() is the explicit abort: "do not prerender past * this line." Only after it is new Date() legal, because only then does a * request exist for it to describe. */export async function RequestTimeSection() {  await connection()  return (    <section>      <h2>Request time</h2>      <p>        Rendered at <time>{new Date().toISOString()}</time>      </p>    </section>  )}

'use client'
// client: reads a value that only exists in a browserimport { useEffect, useState } from 'react'
export function ClientTimeSection() {  const [at, setAt] = useState<string | null>(null)
  // Runs after hydration, never on the server. The null first render is  // what the server sends and what the client must agree with.  useEffect(() => {    setAt(new Date().toISOString())  }, [])
  return (    <section>      <h2>Client time</h2>      <p>{at ? <>Hydrated at <time>{at}</time></> : 'Not hydrated yet'}</p>      <p>        Viewport:{' '}        {typeof window === 'undefined'          ? 'unknown on the server'          : `${window.innerWidth}px`}      </p>    </section>  )}

export async function recordView(route: string, at: number) {  // Stands in for an analytics write or an audit-log insert: work the  // visitor must never wait for.  await new Promise((r) => setTimeout(r, 300))  console.log(`[audit] ${route} viewed, queued at ${at}, written at ${Date.now()}`)}

pnpm build && pnpm start