How does data fetching and caching work in the App Router?
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
You fetch inside async Server Components using the extended fetch:
const res = await fetch('https://api.example.com/posts', {
next: { revalidate: 60, tags: ['posts'] },
});
By default fetch is cached and deduplicated for the lifetime of a request; cache: 'no-store' opts out, and next.revalidate sets an ISR window. revalidatePath('/posts') and revalidateTag('posts') purge caches on demand, typically from a Server Action or route handler after a mutation.
Because components render on the server, data loading is colocated and can be parallelised; wrap slow parts in Suspense to stream. Avoid the old client-side useEffect pattern unless data must be live and user-specific. generateStaticParams pre-renders dynamic routes at build time.
Each route segment can tune caching with export const dynamic = 'force-dynamic' or export const revalidate. Getting these settings right is the main source of stale-data bugs.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.