5 questions found
What is caching in Next.js and why is it important?
Beginner
Caching means storing the result of a data fetch or a rendered page so that future requests can reuse that saved result instead of doing the same work again. This makes your application faster and reduces the load on your database or external APIs, since repeated requests do not need to be processed from scratch.
// Next.js caches fetch requests by default in the App Router
const res = await fetch('https://api.example.com/data');
Real-world example
A news website caches its homepage content for a few minutes, so thousands of visitors reading the same articles do not each trigger a fresh database query, keeping the site fast even under heavy traffic.
Common follow-ups: What are the different types of caching available in Next.js?;How do you turn off caching for data that changes very frequently?
On-Demand Revalidation Strategies;Rendering (SSR/SSG/ISR)
What are the main caching layers in the Next.js App Router?
Intermediate
Next.js caches at several layers, including the fetch request cache which stores data fetching results, the full route cache which stores rendered pages, the router cache on the client which stores recently visited pages for instant back navigation, and the data cache for persisted fetch results across requests.
// Force fresh data on every request
const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
// Cache indefinitely until manually revalidated
const res2 = await fetch('https://api.example.com/data', { cache: 'force-cache' });
Real-world example
A weather application uses no-store caching for live temperature data that must always be current, while using force-cache for a static list of supported cities that rarely changes.
Common follow-ups: What is the difference between the data cache and the full route cache?;How long does the client side router cache keep pages before refetching them?
Data Fetching;On-Demand Revalidation Strategies
How do you control how long a fetched piece of data stays cached before it is considered stale?
Intermediate
You pass a revalidate option to the fetch call, specifying the number of seconds after which Next.js should fetch fresh data again instead of using the cached version, giving you fine grained control over how up to date each piece of data needs to be.
const res = await fetch('https://api.example.com/posts', {
next: { revalidate: 60 }
});
Real-world example
A blog revalidates its list of posts every sixty seconds, so new articles appear reasonably quickly without needing to rebuild the entire site or fetch fresh data on every single request.
Common follow-ups: What happens to users viewing the page while the data is being revalidated in the background?;Can you set different revalidate times for different fetch calls on the same page?
On-Demand Revalidation Strategies;Rendering (SSR/SSG/ISR)
How would you manually clear cached data after a user performs an action, such as creating a new post?
Advanced
You call the revalidatePath or revalidateTag function inside a server action or route handler after the update completes, telling Next.js to throw away the old cached version of a specific page or tagged data so the next request fetches fresh information immediately.
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData) {
await savePost(formData);
revalidatePath('/blog');
}
Real-world example
A blog admin panel clears the cache for the blog listing page immediately after a new post is published, so readers see the new post right away instead of waiting for the next scheduled revalidation.
Common follow-ups: What is the difference between revalidatePath and revalidateTag?;Can you revalidate multiple related pages at the same time?
On-Demand Revalidation Strategies;Server Actions & Mutations
What caching pitfalls should you watch out for when building a Next.js application with dynamic, user specific data?
Advanced
A common pitfall is accidentally caching data that is different for each user, such as personalized dashboards or shopping carts, which can leak one user's data to another. You avoid this by using cache: no-store or cookies based rendering for anything personalized, while still caching truly shared, public data.
// Personalized data should not be cached
const res = await fetch('https://api.example.com/cart', { cache: 'no-store' });
Real-world example
A shopping cart feature accidentally cached one customer's cart contents and briefly showed it to another customer, so the team fixed it by explicitly disabling caching for anything tied to an individual user's session.
Common follow-ups: How do you test that personalized data is not being accidentally cached?;What tools can help detect caching bugs before they reach production?
Security Best Practices in Next.js;Rendering (SSR/SSG/ISR)