Next.js Interview Questions
Master Server Components, caching strategies, routing, and Next.js 14+ architecture.
Editorial Integrity
Updated for Next.js 14+ App Router paradigms, completely ignoring deprecated Pages Router patterns.
What is the difference between Server Components and Client Components?
Server Components render on the server and send zero JavaScript to the browser, making the page load much faster. Client Components render on the browser and are required whenever you need interactivity (like `onClick`) or state (`useState`).
Deep Dive Explanation
In Next.js 13+ (App Router), all components are Server Components by default. They can directly query databases and keep sensitive API keys secure. To use a Client Component, you must add the `'use client'` directive at the top of the file. Client Components add to the client-side JavaScript bundle size, so they should be pushed down the component tree as far as possible (e.g., wrap a button in a Client Component, not the whole page).
Adding 'use client' at the top of `page.tsx`, effectively disabling all Server Component benefits for the entire route.