LESSON 02 / 9·2 min readIntermediate

Server Component vs Client Component?

Try code in the playground

01 Understand02 Recall 03 Prepare

Understand the concept

A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.

Important ideas

Server Components can fetch server data without shipping their component code to the browser.
Client Components support state, effects and browser events through a 'use client' boundary.
Client Components can still be pre-rendered on the server for the initial page.

Reference: Next.js server and client components.

Keep sensitive data access server-side and pass only serializable, necessary data across the boundary.

PAUSE & RECALL

Can you explain it without the notes?

Server Component vs Client Component?

Use your own words. Explain an example and one limitation before checking the explanation.

Check your explanation

A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.

CONNECT IT TO YOUR INTERVIEW

Turn this concept into a clear answer.

Use a small interactive client subtree inside a server-rendered page instead of making the entire page a client component without a reason.

Server Component vs Client Component?

Next.js·Next.js architecture

A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.

Intermediate2 min read

Practice this concept

YOUR NEXT STEP

Keep connecting the ideas.

Next lesson: SSR vs CSR vs SSG vs ISR?

Adapted from 06_REACT_NEXTJS.md · “Server Component vs Client Component?”. Examples are study fragments; framework behavior can depend on your version.