The Shift in Mental Model

In React 18 and 19 App Router architecture, the default boundary moves to the server.

Component Rule Matrix

| Requirement | Component Type | Implementation | | :--- | :--- | :--- | | Database access / Secret keys | Server Component | async function Page() | | Interactive state (useState) | Client Component | "use client" | | Event handlers (onClick) | Client Component | "use client" | | Server Mutations | Server Action | "use server" |

// Server Action Example
export async function likeArticle(postId: string) {
  "use server";
  const session = await auth();
  if (!session?.user) throw new Error("Unauthorized");
  
  return await db.like.create({
    data: { postId, userId: session.user.id }
  });
}

Performance Takeaways

1. Zero Bundle Impact: Dependencies imported exclusively in Server Components add 0 bytes to the client JavaScript bundle.
2. Streaming Suspense: Wrap heavy async database queries in <Suspense> to send instant shell HTML to the browser.