5 questions found
What is a server component in the Next.js App Router, and why is it the default?
Beginner
A server component renders entirely on the server and sends only the resulting HTML and minimal necessary data to the browser, without shipping its own JavaScript to the client, which is why it is the default in the App Router, keeping applications fast and lightweight unless interactivity is specifically needed.
// This is a server component by default, no directive needed
export default async function Page() {
const posts = await getPosts();
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
Real-world example
A blog's article listing page renders entirely on the server as a server component, sending only the final HTML to visitors without any unnecessary JavaScript for a page that has no interactive elements.
Common follow-ups: What are the main benefits of server components over client components?;Can a server component use React hooks like useState?
Client Components & Hydration;Bundle Analysis & Code Splitting
Why can't server components use hooks like useState or useEffect?
Beginner
Server components render once on the server to produce static HTML and do not run again in the browser afterward, so hooks that manage ongoing client side state or respond to browser events have no meaningful place to run, since there is no continuous client side lifecycle for them to hook into.
// This would not work in a server component
export default function Page() {
// useState requires a client component
// const [count, setCount] = useState(0);
}
Real-world example
A developer tries adding a useState hook to track a counter inside a server component, gets an error, and learns to move that specific piece of interactive logic into a separate client component instead.
Common follow-ups: How do you add interactivity to a page that is mostly a server component?;What is the smallest amount of a page that typically needs to be a client component?
Client Components & Hydration;State Management in Next.js Apps
What are the main performance benefits of using server components compared to rendering everything on the client?
Intermediate
Server components reduce the amount of JavaScript sent to the browser since their code never needs to run client side, they can access backend resources like databases directly without an extra API layer, and they allow sensitive logic and credentials to stay completely hidden from the browser.
// Direct database access with no API layer needed
import { db } from '@/lib/db';
export default async function Page() {
const users = await db.user.findMany();
return <UserList users={users} />;
}
Real-world example
A dashboard fetches data directly from the database inside a server component, skipping the need for a separate API layer entirely and reducing both complexity and the amount of JavaScript sent to visitors.
Common follow-ups: Does removing the need for an API layer always improve performance?;How much smaller is a typical bundle when using server components effectively?
Database Integration with Next.js;Bundle Analysis & Code Splitting
How do you decide whether a specific piece of a page should be a server component or a client component?
Intermediate
You default to server components for anything that does not need interactivity, browser only APIs, or React state, and only reach for client components for the specific, usually small, pieces of a page that genuinely need to respond to user interaction, manage local state, or use effects.
// Server component: static content and data fetching
async function ProductPage() {
const product = await getProduct();
return (
<div>
<h1>{product.name}</h1>
<AddToCartButton productId={product.id} /> {/* client component */}
</div>
);
}
Real-world example
A product page keeps its description and images as a fast loading server component, isolating only the interactive add to cart button as a small, focused client component.
Common follow-ups: What questions should you ask yourself when deciding between server and client components?;Is it ever acceptable to make an entire page a client component?
Client Components & Hydration;Bundle Analysis & Code Splitting
What data types and values can be safely passed as props from a server component to a client component?
Advanced
You can pass any value that can be serialized, such as strings, numbers, plain objects, and arrays, but you cannot pass things like functions, class instances, or database connection objects, since these cannot be sent across the boundary from server rendered code into the browser's JavaScript environment.
// Safe to pass: serializable data
<ClientComponent title={post.title} tags={post.tags} />
// Not safe to pass: a function or a database client
// <ClientComponent onSave={saveToDatabase} /> // this will not work
Real-world example
A team accidentally tries passing a database query function as a prop into a client component, gets an error, and instead refactors to call that function inside the server component and pass only the resulting plain data down.
Common follow-ups: What happens if you try to pass a non-serializable value as a prop?;Are there exceptions that allow passing certain function-like values, such as server actions?
Client Components & Hydration;Server Actions & Mutations