Next.js Caching & Revalidation — Keeping Data Fresh

▲ Next.js 15+ (App Router) 🟢 Chapter 16 of 43 📂 Phase 7: Data Fetching 📅 2026 Edition
📌 Covered in this chapter: Caching Basics · Time-Based Revalidation · On-Demand Revalidation · revalidatePath & revalidateTag · Avoiding Stale Data
Static data ni ప్రతిసారి fresh గా fetch చేయడం wasteful. Ee chapter lో, Next.js caching system, and data ni ఎప్పుడు, ఎలా fresh గా update cheయాలో నేర్చుకుందాం.
1Caching Ante Enti?

Next.js, fetch() results ని automatic గా cache చేస్తుంది — same URL కి request వచ్చినప్పుడు, network call చేయకుండా cached response return చేస్తుంది. Idి production sites ni chాలా fast చేస్తుంది, kani "stale data" (పాత data) చూపించే risk కూడా ఉంటుంది.

2Time-Based Revalidation

Data ని oka fixed time interval తర్వాత automatic గా refresh చేయాలంటే, revalidate option వాడతారు — దీన్నే ISR (Incremental Static Regeneration) అంటారు:

💻 Example 1: Revalidate Every 60 Seconds
app/products/page.tsx ▶ Run in Compiler
async function getProducts() {
  const res = await fetch("https://api.example.com/products", {
    next: { revalidate: 60 },
  });
  return res.json();
}
🔍 Breakdown:

next: {"{"}revalidate: 60{"}"} — cached data ni 60 seconds వరకు reuse చేస్తుంది. 60 seconds దాటిన తర్వాత next request వచ్చినప్పుడు, background లో fresh data fetch అయ్యి cache update అవుతుంది.

3On-Demand Revalidation

Content update అయినప్పుడు (example: admin ఒక product edit చేసినప్పుడు) వెంటనే cache clear చేయాలంటే, revalidatePath లేదా revalidateTag వాడతారు — usually Server Action లేదా Route Handler లోపల:

💻 Example 2: Revalidating After an Update
app/actions.ts ▶ Run in Compiler
"use server";

import { revalidatePath } from "next/cache";

export async function updateProduct(id: string) {
  // ... update database logic here
  revalidatePath("/products");
}

revalidatePath("/products"), /products route cache ni immediately invalidate చేస్తుంది — next visit లో fresh data fetch అవుతుంది.

4revalidatePath vs revalidateTag
FunctionUse When
revalidatePath("/products")Specific route/page ni target చేయాలి
revalidateTag("products")Multiple pages లో same tagged data ni ఒకేసారి invalidate చేయాలి

Tags వాడాలంటే, fetch call లో {"{"}next: {"{"}tags: ["products"]{"}"}{"}"} add చేయాలి.

⚠️ Common Mistake: Forgetting to Revalidate After Mutations

Database update చేసిన తర్వాత revalidatePath/revalidateTag call చేయకపోతే, users కి పాత (stale) data కనిపిస్తూనే ఉంటుంది — cache manual గా clear అయ్యే వరకు (leda time-based revalidate వరకు) update కనిపించదు.

💻 Hands-on Interactive Practice Challenge

Write a fetch call for a 'blog posts' list that revalidates every 300 seconds (5 minutes).

app/blog/page.tsx ▶ Run in Compiler
async function getPosts() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 300 },
  });
  return res.json();
}
Run This Challenge in Online Node.js IDE →
Frequently Asked Questions (FAQ)

Q revalidate: 0 అంటే ఏమిటి?

revalidate: 0, cache ని పూర్తిగా disable చేసి, prathi request కి fresh data fetch చేస్తుంది (SSR laాంటి behavior). Real-time data (stock prices, live scores) కి useful.

Q revalidatePath ఏ context లో వాడాలి?

ఇది Server Actions లేదా Route Handlers లోపల matrame వాడాలి — regular Server Component render logic లో వాడకూడదు.

Q Time-based, on-demand revalidation కలిపి వాడొచ్చా?

Avunu. Common pattern: fetch కి baseline revalidate (e.g., 3600 seconds/1 hour) pెట్టి, content update అయినప్పుడు revalidatePath తో వెంటనే fresh చేయడం — best of both worlds.

OC
Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on Next.js 15+ (App Router) · Last updated August 2026