Extended fetch API
Next.js extends native fetch with caching options:
// Cached (default in Server Components)
const data = await fetch(url);
// No cache — always fresh
const data = await fetch(url, { cache: "no-store" });
// Revalidate every hour
const data = await fetch(url, { next: { revalidate: 3600 } });
// Tag-based revalidation
const data = await fetch(url, { next: { tags: ["posts"] } });
Revalidate On Demand
import { revalidateTag } from "next/cache";
export async function POST() {
revalidateTag("posts");
return Response.json({ revalidated: true });
}
Interview Questions
Q: How do you avoid request waterfalls?
- Fetch in parallel with
Promise.all - Colocate data fetching in the component that needs it
- Use React
cache()for deduplication
Q: Difference between cache: 'no-store' and revalidate: 0?
Both skip cache, but no-store is explicit opt-out. revalidate: 0 still participates in cache infrastructure with immediate expiry.
Q: Can Client Components fetch on the server?
Not directly — pass data as props from Server Components or use Route Handlers / Server Actions.