Next.js App Router Architecture: Server Components vs Client Components

The transition from traditional React Single Page Applications (SPAs) to React Server Components (RSC) represents the most monumental leap in web architecture in a decade. RSC allows engineering teams to keep heavy libraries on the server, sending zero JavaScript to the client while preserving full interactivity.

1. The Server Component Default Paradigm

In Next.js App Router, every component is a Server Component by default. You can query databases directly, access filesystem assets, and read environment secrets without spinning up separate API endpoints. The client bundle remains 0 KB for static content.

2. Pushing 'use client' Leaves to the Edge

Do not declare 'use client' at the top of an entire page layout. Treat client components as leaves on your component tree: only wrap elements that require state (useState), browser APIs (onClick, onChange), or event listeners.

"Every time you type 'use client', you are shipping JavaScript down the wire to user mobile devices. Push interactivity to the leaves of your component tree."

3. Instant Streaming with React Suspense

Slow database queries no longer block initial HTML delivery. Wrapping slow asynchronous components in <Suspense fallback={<Skeleton />}> streams the primary page skeleton in under 100 milliseconds, hydrating individual modules as their data resolves.

• Default to Server Components: 0 KB JS sent to client browser for pure presentation.
• Push 'use client' to leaves: Isolate interactive buttons, carousels, and input forms.
• Stream with Suspense: Deliver instant TTFB while asynchronous data resolves.
• Server Actions: Perform form submissions and database mutations without manual API routes.