What is Next.js data fetching in the App Router?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Next.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
The App Router introduced a new data fetching model built on Web fetch API with caching capabilities. Three data fetching approaches: (1) fetch() in Server Components (recommended): async function Page() { const data = await fetch("https://api.example.com/data", { cache: "force-cache", // SSG (default), cached indefinitely next: { revalidate: 60 }, // ISR cache: "no-store", // SSR (fresh every request) }).then(r => r.json()); return <div>{data.title}</div>; }; (2) ORM/database queries in Server Components: async function UserList() { const users = await prisma.user.findMany(); return <ul>{users.map(u => <li>{u.name}</li>)}</ul>; }; (3) Client-side data fetching: use SWR or React Query in Client Components for: user-specific data that changes frequently, real-time updates, infinite scroll. Parallel data fetching: const [users, posts] = await Promise.all([getUsers(), getPosts()]);. Sequential fetching (when needed): one fetch depends on another result. Request deduplication: Next.js automatically deduplicates fetch() requests with the same URL and options in a single render pass — even if multiple components request the same URL, only one HTTP request is made. Caching tags: fetch("...", { next: { tags: ["posts"] } }) — tag for targeted revalidation: revalidateTag("posts") revalidates all fetches with this tag.
Common Mistake
A common mistake is memorizing definitions without understanding implications. When asked this question, go one level deeper — explain what happens when this concept is misused or ignored.