Server & Client Components

What this module covers

4 steps · Next.js

1. Step 1. Server & Client Components

   App Router has two component types. Server Components (default) run on the server. Client Components run in the browser with interactivity. // Server Component — no directive needed export default async function BlogPage() { const posts = await db.posts.findAll(); // direct DB access return <PostList posts={posts} />; } // can: fetch data, DB access, use secrets // cannot: useState, useEffect, onClick, browser APIs 'use client'; // required directive export default function LikeButton({ postId }) { const [liked, setLiked] = useState(false); return <button onClick={() => setLiked(!liked)}>{liked ? "♥" : "♡"} Like</button>; } // can: useState, useEffect, event handlers, browser APIs // cannot: direct DB access, server-only secrets A Server Component can render a Client Component as a child — the client JS is only downloaded for that interactive island, not the whole page.

   "use client" is what makes useState legal here at all — without it, this file would be treated as a Server Component, and Server Components cannot use any client-only hook. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does LikeButton use "use client" and useState to toggle a liked state?

2. Step 2. Quiz: Server & Client Components

   Answer these questions about the Server/Client Component split.

   "use client" marks a file's exports as Client Components; Server Components can access data directly but not browser-only APIs; Server Components can render Client Components as children. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Answer the quiz below.

3. Step 3. Server Page with Client Island

   Build a ProductPage Server Component that fetches product data directly, with a Client Component AddToCartButton that has its own quantity state.

   This step bundles the two real files together so you can see them wired up as one working preview, the same pattern used by other multi-file capstone steps in this app. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does the pair correctly split server and client responsibilities?

4. Step 4. Mini project: Server & Client Components

   Build a ProductPage Server Component that fetches product data directly, with a Client Component AddToCartButton that has its own quantity state. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This step bundles the two real files together so you can see them wired up as one working preview, the same pattern used by other multi-file capstone steps in this app. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does the pair correctly split server and client responsibilities?