Caching Strategy in Next.js 2026 – What I Use Now
— NextJS, Caching, Performance, WebDev — 2 min read
Caching Strategy in Next.js 2026 – What I Use Now
Hey everyone,
Caching is one of the things that tends to cause the most confusion in Next.js, especially since the App Router. After trying various combinations, here's the approach I use most often now.
1. Understand the Types of Cache First
I distinguish between 3 levels:
- Request Memoization → React
cache()(single request only) - Data Cache →
fetchcache /unstable_cache - Full Route Cache → Static rendering
2. The Strategy I Follow
A. Data that rarely changes
import { unstable_cache } from "next/cache";
const getProducts = unstable_cache( async () => { return await db.product.findMany(); }, ["products"], { revalidate: 3600 }, // 1 hour);B. Data that changes fairly often
I use revalidate: 60 or revalidateTag.
C. Data that must always be fresh
fetch(url, { cache: "no-store" });3. The Revalidation Approach I Like
- Time-based (
revalidate: number) → simple and predictable - On-demand (
revalidateTag/revalidatePath) → more powerful
I often combine the two.
4. Things I Avoid
- Don't cache all data by default
- Don't forget to invalidate the cache after a mutation
- Don't over-cache data that's highly personal / user-specific
5. Practical Tips
- Start with static first, then add dynamic only when needed
- Use
loading.tsxso users still get feedback - Monitor the cache hit rate in production
- Document the tags you use so they're easy to revalidate
Conclusion
Caching in Next.js isn't about "caching as much as possible." It's about finding the balance between freshness and performance.
If your caching strategy still feels messy, try starting by separating data that's "okay to be stale" from data that "must be fresh."
A question for you all: How do you set up caching in Next.js these days? Do you rely more on time-based or on-demand revalidation?
Share your thoughts in the comments!
— Ady Rahmansyah Software Engineer | Tech Blogger | Coffee Addict