React Server Components

Why RSC

Server Components run exclusively on the server. They never hydrate on the client, which means your database queries, API tokens, and heavy libraries stay server-side. The result is a smaller bundle and faster paint.

The Pattern

// app/page.tsx — this is a Server Component by default
import { db } from '@/lib/db';

export default async function Page() {
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 20,
  });

  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

Client Boundaries

When you need interactivity — state, effects, event handlers — mark the file with "use client". That component and its children ship a client bundle. Keep client leaves as small as possible.

Streaming & Suspense

Wrap slow data fetches in React <Suspense> boundaries. Next.js streams the shell immediately and fills in the gaps as data resolves — no blocking, no spinners for the whole page.