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()

Advanced answer

Deep dive

Expanding on the short answer — what usually matters in practice:

Context (tags): caching, revalidation, fetch, nextjs
Lifecycle: what happens at runtime (render/build, request/response, background jobs).
Caching: where cache lives, cache keys, how to invalidate without chaos.
Security: authn/authz, secrets, attack surface (SSRF/CSRF).
Explain the "why", not just the "what" (intuition + consequences).
Trade-offs: what you gain/lose (time, memory, complexity, risk).
Edge cases: empty inputs, large inputs, invalid inputs, concurrency.

Examples

Here’s an additional example (building on the short answer):

export const revalidate = 60

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

Common pitfalls

Too generic: no concrete trade-offs or examples.
Mixing average-case and worst-case (e.g., complexity).
Ignoring constraints: memory, concurrency, network/disk costs.

Interview follow-ups

When would you choose an alternative and why?
What production issues show up and how do you diagnose them?
How would you test edge cases?

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

Answer

export const revalidate = 60

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

Advanced answer

Deep dive

Expanding on the short answer — what usually matters in practice:

Context (tags): caching, revalidation, fetch, nextjs
Lifecycle: what happens at runtime (render/build, request/response, background jobs).
Caching: where cache lives, cache keys, how to invalidate without chaos.
Security: authn/authz, secrets, attack surface (SSRF/CSRF).
Explain the "why", not just the "what" (intuition + consequences).
Trade-offs: what you gain/lose (time, memory, complexity, risk).
Edge cases: empty inputs, large inputs, invalid inputs, concurrency.

Examples

Here’s an additional example (building on the short answer):

export const revalidate = 60

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

Common pitfalls

Too generic: no concrete trade-offs or examples.
Mixing average-case and worst-case (e.g., complexity).
Ignoring constraints: memory, concurrency, network/disk costs.

Interview follow-ups

When would you choose an alternative and why?
What production issues show up and how do you diagnose them?
How would you test edge cases?