#The Next.js 16 Cache Model¶

Next.js 16 introduces an opt-in caching model. By default nothing is cached — you cache deliberately, with "use cache" + cacheTag + cacheLife.

The Old Model (Pre-15) vs the New Model¶

Why the change? The old model conflated "is this request cached?" with "is this route static?" — leading to surprising production behavior. The new one is explicit.

"use cache" — The Core Primitive¶

Add the directive at the top of a function or file:

1// lib/data/courses.ts
2"use cache";
3import { db } from "@/lib/db";
4
5export async function getPublishedCourses() {
6  return db.course.findMany({ where: { status: "PUBLISHED" } });
7}

Calling getPublishedCourses() from anywhere — a Server Component, an API route, a Server Action — returns the cached value when the cache is warm and fresh.

cacheTag — Tag It For Invalidation¶

1"use cache";
2import { cacheTag } from "next/cache";
3
4export async function getCourse(slug: string) {
5  cacheTag("course", `course:${slug}`);
6  return db.course.findUnique({ where: { slug } });
7}

Now you can revalidate every cached entry for that course with one call:

1import { revalidateTag } from "next/cache";
2revalidateTag(`course:${slug}`);

Or wipe all cached courses:

1revalidateTag("course");

cacheLife — How Long Things Stay Fresh¶

1"use cache";
2import { cacheLife } from "next/cache";
3
4export async function getHomeFeed() {
5  cacheLife("minutes");      // alias for { stale: 60s, revalidate: 5min, expire: 30min }
6  return /* … */;
7}

Named profiles:

Custom values:

1cacheLife({ stale: 30, revalidate: 300, expire: 3600 });

Stale-While-Revalidate Semantics¶

The terminology matters:

• stale — within this window, serve from cache and don't re-fetch
• revalidate — after this window, serve from cache and trigger a background re-fetch
• expire — after this window, the entry is gone; the next request blocks for a fresh fetch

This is the same model CDNs use for Cache-Control: stale-while-revalidate.

Caching a Whole Page¶

1// app/(marketing)/page.tsx
2"use cache";
3import { cacheLife } from "next/cache";
4
5export default async function Home() {
6  cacheLife("hours");
7  const posts = await db.blog.findMany({ take: 6 });
8  return <Hero posts={posts} />;
9}

Caching a Single Component¶

1// components/Reviews.tsx
2"use cache";
3import { cacheTag, cacheLife } from "next/cache";
4
5export async function Reviews({ courseId }: { courseId: string }) {
6  cacheTag(`reviews:${courseId}`);
7  cacheLife("hours");
8  const reviews = await db.review.findMany({ where: { courseId } });
9  return /* … */;
10}

The page can be uncached while only the Reviews block is cached — a form of partial caching that the old model never made easy.