Drills: Next.js in Production

// the read — tag it
const res = await fetch(`${process.env.API_URL}/docs`, {
  next: { tags: ["documents"] },
})

// the write — invalidate it (inside the "use server" action)
import { revalidateTag } from "next/cache"
revalidateTag("documents")   // next render of the list refetches

The mental model: tag your reads, revalidate on your writes. Without the tag, revalidateTag has nothing to clear.

// 1 · Request Memoization — server, one render pass (dedupes fetches)
// 2 · Data Cache         — server, persists across requests/users
// 3 · Full Route Cache   — server, stores rendered static routes
// 4 · Router Cache       — client, in the browser for fast navigation

Three live on the server, one in the browser. Saying this cleanly is a near-guaranteed interview win.

// route-level: opt the whole segment out of static/route caching
export const dynamic = "force-dynamic"

// fetch-level: always go to the source
fetch(url, { cache: "no-store" })

Reading cookies() or headers() would also force dynamic — but the explicit export makes intent obvious.

// actions.ts
"use server"
import { z } from "zod"

const Schema = z.object({ title: z.string().min(1).max(200) })
type State = { ok?: boolean; error?: string }

export async function save(_p: State, fd: FormData): Promise<State> {
  const r = Schema.safeParse({ title: fd.get("title") })
  if (!r.success) return { error: "Title must be 1–200 chars" }
  return { ok: true }
}

// form.tsx (client)
"use client"
import { useActionState } from "react"
import { save } from "./actions"

export function Form() {
  const [state, action, pending] = useActionState(save, {})
  return (
    <form action={action}>
      <input name="title" />
      <button disabled={pending}>{pending ? "Saving…" : "Save"}</button>
      {state.error && <p>{state.error}</p>}
    </form>
  )
}

Because action is a real Server Action, the form still submits if JS hasn't loaded — progressive enhancement for free.

// middleware.ts
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(req: NextRequest) {
  const session = req.cookies.get("authjs.session-token")
  if (!session) return NextResponse.redirect(new URL("/login", req.url))
  return NextResponse.next()
}

export const config = { matcher: ["/docs/:path*"] }

Remember the limit: this only proves the cookie exists. The real verification is await auth() server-side in the page or action.

// (a) Pricing  → STATIC
//     Same HTML for everyone, rarely changes — prerender once.

// (b) Dashboard → DYNAMIC
//     Per-user data, must be fresh — render every request
//     (it goes dynamic anyway once you read cookies()/auth()).

// (c) Docs + widget → PPR
//     Static shell (header/nav) + the personalised widget in
//     a <Suspense> dynamic hole. Best of both.

The decision is per-region with PPR: anything personalised or slow goes in a Suspense boundary; everything else is prerendered.

// app/docs/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function Page() {
  const session = await auth()
  if (!session?.user) redirect("/login")
  return <h1>Welcome, {session.user.name}</h1>
}

No props, no client fetch — auth() works directly on the server. This server-side guard is the real security boundary, not the middleware redirect.

// middleware.ts — gate the area
export { auth as middleware } from "@/auth"
export const config = { matcher: ["/docs/:path*"] }

// app/docs/actions.ts — the hardened mutation
"use server"
import { z } from "zod"
import { revalidateTag } from "next/cache"
import { auth } from "@/auth"

const Schema = z.object({
  title: z.string().min(1).max(200),
  file: z.instanceof(File).refine((f) => f.size > 0, "Empty file"),
})
type State = { ok?: boolean; error?: string }

export async function uploadDoc(_p: State, fd: FormData): Promise<State> {
  const session = await auth()                       // 1 · authorize
  if (!session?.user) return { error: "Not authenticated" }

  const r = Schema.safeParse({                       // 2 · validate
    title: fd.get("title"), file: fd.get("file"),
  })
  if (!r.success) return { error: r.error.issues[0].message }

  const body = new FormData()                       // 3 · call FastAPI
  body.set("title", r.data.title)
  body.set("file", r.data.file)
  const res = await fetch(`${process.env.API_URL}/upload`, {
    method: "POST", body,
    headers: { Authorization: `Bearer ${session.accessToken}` },
  })
  if (!res.ok) return { error: "Upload failed" }

  revalidateTag("documents")                        // 4 · refresh the list
  return { ok: true }
}

// app/docs/doc-list.tsx — the tagged read
import { auth } from "@/auth"

export async function DocList() {
  const session = await auth()
  const res = await fetch(`${process.env.API_URL}/docs`, {
    headers: { Authorization: `Bearer ${session?.accessToken}` },
    next: { tags: ["documents"] },
  })
  const docs = await res.json()
  return <ul>{docs.map((d) => <li key={d.id}>{d.title}</li>)}</ul>
}

The chain — gate, authorize, validate, call, revalidate — is the exact shape of every secure mutation you'll ship. The tag on the read is what makes revalidateTag on the write actually refresh the UI.