cache-component-patternlisted

# cache-component-pattern Use when writing or modifying any Next.js 16 Server Component, route handler, or fetch in `app/`. Cache Components is Next 16's default-cache model — flipping the previous default-dynamic stance. Getting this right is the difference between a page rendered in 30ms (cached) and 800ms (regenerated every request). ## The default Next 16 caches by default at the Server Component / fetch level. You opt out, not in. This is the inverse of Next 13/14. ```tsx // app/blog/[slug]/page.tsx — cached by default export default async function Page({ params }: { params: { slug: string } }) { const post = await db.query.posts.findFirst({ where: eq(posts.slug, params.slug) }); return <Article post={post} />; } ``` This page IS cached. The `params.slug` is the key. New slugs trigger a fresh render; existing slugs serve from cache. ## When to opt OUT — `'use no cache'` Some content cannot be cached. Tag the component or fetch: ```tsx // app/dashboard/page.tsx — user-specific 'use no cache'; export default async function Page() { const user = await getCurrentUser(); // session-dependent return <Dashboard user={user} />; } ``` Use `'use no cache'` when the response depends on: - Current user identity (`getCurrentUser`, `cookies()`, `headers()`) - Live data with sub-minute staleness requirements (real-time dashboards, inbox) - Random sampling, A/B tests at render time - `Date.now()` or similar non-deterministic inputs you don't want to key The rule