Caching in Next.js — Complete Guide
Caching in Next.js — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.
On this page
Next.js Tutorial (LearnHub) · Lesson 38 of 100
Caching in Next.js
Beginner ✓ → Intermediate → Advanced → Professional
Intermediate · 2 — Building apps · ~14 min read · Module 4: Auth & APIs
Introduction
You know the basics now. Here we use Caching in Next.js in real LearnHub screens — layouts, data, and APIs. Still plain language, just a bit more depth. Next.js caches fetch results, static pages, and rendered Server Components by default. You control cache with fetch options, revalidate, and cache tags. Without understanding cache, LearnHub might show yesterday's course list after an admin update, or you might disable cache everywhere and slow the site.
Route Handlers are how LearnHub talks to webhooks and mobile clients. Get JSON responses solid here.
When will you use this?
Use Route Handlers when a mobile app, webhook, or external client needs JSON from your server.
- Mobile apps and partner sites call your Next.js Route Handlers for JSON over HTTP.
- Webhook endpoints for payment providers live in app/api routes.
Real-world: HDFC-style banking dashboard
The Banking team building HDFC-style banking dashboard uses Caching in Next.js to apply Caching in Next.js when building accounts, transfers, and statement views. account holders never see the TypeScript files — they just get a fast, reliable accounts, transfers, and statement views.
Production-style code
// Cached 1 hour by default for static fetches at build
const res = await fetch('https://api.example.com/courses');
// No cache — always fresh (SSR-like)
const live = await fetch('https://api.example.com/progress', {
cache: 'no-store'
});
// ISR — revalidate every 5 minutes
const catalog = await fetch('https://api.example.com/courses', {
next: { revalidate: 300, tags: ['courses'] }
});What happens in production: In HDFC-style banking dashboard, getting Caching in Next.js right means account holders trust the accounts, transfers, and statement views every day.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// Cached 1 hour by default for static fetches at build
const res = await fetch('https://api.example.com/courses');
// No cache — always fresh (SSR-like)
const live = await fetch('https://api.example.com/progress', {
cache: 'no-store'
});
// ISR — revalidate every 5 minutes
const catalog = await fetch('https://api.example.com/courses', {
next: { revalidate: 300, tags: ['courses'] }
});Line-by-line walkthrough
| Code | What it means |
|---|---|
// Cached 1 hour by default for static fetches at build | Comment — notes for humans; the compiler ignores it. |
const res = await fetch('https://api.example.com/courses'); | Fetches data over HTTP — runs on the server in Server Components or in Server Actions. |
// No cache — always fresh (SSR-like) | Comment — notes for humans; the compiler ignores it. |
const live = await fetch('https://api.example.com/progress', { | Fetches data over HTTP — runs on the server in Server Components or in Server Actions. |
cache: 'no-store' | Part of the Caching in Next.js example — read it together with the lines before and after. |
}); | Closes a block started by { above. |
// ISR — revalidate every 5 minutes | Comment — notes for humans; the compiler ignores it. |
const catalog = await fetch('https://api.example.com/courses', { | Fetches data over HTTP — runs on the server in Server Components or in Server Actions. |
next: { revalidate: 300, tags: ['courses'] } | Part of the Caching in Next.js example — read it together with the lines before and after. |
}); | Closes a block started by { above. |
How it works (big picture)
- cache: no-store opts out.
- revalidate sets seconds until refresh.
- tags let you invalidate groups with revalidateTag after a Server Action.
Do this on your computer
- Log fetch cache behavior in dev with next.config logging.
- Add tags to course fetch and call revalidateTag in an admin action.
- Compare build output for static vs dynamic routes.
- Read the real-world section and name which part of LearnHub uses this topic.
- Run the example locally with npm run dev and confirm the same behavior.
- Change one value in the example (route, text, or course id) and predict what will happen before you save.
Experiments — try changing this
- Change a string or route in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error overlay, then fix it.
- Change the API URL or course id and see how the page data changes.
- Use npm run dev while editing Caching in Next.js — the page hot-reloads on save.
Remember
Next.js caches aggressively by default. Use revalidate and tags for controlled freshness. no-store when data must be per-request.
Common questions
How do I debug cache?
Use dynamic = "force-dynamic" temporarily or check the build route table for ○ vs λ symbols.
How long should I spend on Caching in Next.js?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.
What if I get stuck on Caching in Next.js?
Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Caching in Next.js used in real jobs?
See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.