Next.jshard

Explain caching and revalidation in Next.js (fetch cache, revalidatePath).

Answer

Next.js caches server fetches by default based on request and route settings. You can opt out with cache: 'no-store' or set a revalidate time to refresh data periodically. revalidatePath/revalidateTag let you invalidate cached pages or data on demand.

export const revalidate = 60

const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } })
const posts = await res.json()

Related questions

Next.js

App Router data fetching: what do `cache: 'no-store'` and `revalidate` change?

#nextjs#fetch#cache

Next.js

Static vs dynamic rendering in the App Router: what makes a route dynamic?

#nextjs#rendering#static

Next.js

`next/link` prefetching: what does it do and how can you control it?

#nextjs#link#prefetch

Next.js

Middleware in Next.js: what is it good for and what are its limitations?

#nextjs#middleware#edge

Next.js

Route Handlers in the App Router: how do you define them and what are they used for?

#nextjs#route-handlers#api

Next.js

Cache invalidation: what do `revalidatePath` and `revalidateTag` do?

#nextjs#cache#revalidate