Why this lesson matters

Understand server components and use it correctly in an App Router project. Server Components keep data access and secrets on the server; Client Components exist where browser state, events or APIs are required. The boundary determines bundle size and data exposure.

How to reason about it

  • For Server Components, the outcome to verify is: Keep data access and secrets on the server when browser interaction is unnecessary.
  • In Server Components, keep this failure controlled: Adding use client at a high-level layout turns large subtrees into client code and can tempt developers to move server-only concerns into the browser.
  • Server Components practice target: Render data in a Server Component and pass only a serializable identifier into a small interactive Client Component.

Practical walkthrough

In the Server Components walkthrough: Keep data access and secrets on the server when browser interaction is unnecessary.

app/users/page.tsxtsx
export default async function UsersPage() {
  const users = await getUsers();
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

Practice it yourself

Practice

Server Components exercise

Render data in a Server Component and pass only a serializable identifier into a small interactive Client Component.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary