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

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

1. Log fetch cache behavior in dev with next.config logging.
2. Add tags to course fetch and call revalidateTag in an admin action.
3. Compare build output for static vs dynamic routes.
4. Read the real-world section and name which part of LearnHub uses this topic.
5. Run the example locally with npm run dev and confirm the same behavior.
6. 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