Why this lesson matters

Understand component boundaries 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 Component Boundaries, the outcome to verify is: Pass serializable data from a Server Component into the interactive client boundary.
  • In Component Boundaries, 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.
  • Component Boundaries practice target: Render data in a Server Component and pass only a serializable identifier into a small interactive Client Component.
Diagram

Server and Client boundary

Practical walkthrough

In the Component Boundaries walkthrough: Pass serializable data from a Server Component into the interactive client boundary.

product-page.tsxtsx
export default async function Page() {
  const product = await getProduct();
  return <FavoriteButton productId={product.id} />;
}

Practice it yourself

Practice

Component Boundaries 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