Next.js Caching Explained — Data Cache and Full Route Cache

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Next.js Caching Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Next.js implements multiple caching layers: Data Cache (fetch results), Full Route Cache (static HTML), and Router Cache (client-side prefetched pages), each with configurable revalidation.

What You'll Learn

Data Cache for fetch requests
Full Route Cache for pages
Router Cache for client navigation
Time-based revalidation
On-demand revalidation

Why It Matters

Next.js caching layers work together to deliver fast pages. Understanding each layer helps you configure the right caching Strategy for your data freshness requirements.

// Data Cache — cache fetch results
export default async function PostsPage() {
  const posts = await fetch("https://api.example.com/posts", {
    cache: "force-cache", // Default: cache indefinitely
  }).then(r => r.json());

  const freshPosts = await fetch("https://api.example.com/recent-posts", {
    cache: "no-store", // Always fetch fresh data
  }).then(r => r.json());

  const revalidatedPosts = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }, // Revalidate every hour
  }).then(r => r.json());

  const taggedPosts = await fetch("https://api.example.com/posts", {
    next: { tags: ["posts"] }, // Tag-based revalidation
  }).then(r => r.json());

  return <pre>{JSON.stringify({ posts, freshPosts, revalidatedPosts, taggedPosts }, null, 2)}</pre>;
}

// app/api/revalidate/route.js
import { revalidateTag } from "next/cache";

export async function POST(request) {
  const { tag } = await request.json();

  if (tag) {
    revalidateTag(tag);
    return Response.json({ revalidated: true });
  }

  return Response.json({ error: "Tag required" }, { status: 400 });
}

Expected output: Different fetch calls demonstrate cache: force-cache, no-store, revalidate, and tag-based caching with on-demand tag revalidation.

← Previous Next.js Deployment Explained — Deploy to Production Next → Next.js Analytics Explained — Measuring User Interactions

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Nextjs