RSC vs Client Components

React 19時代の常識。「サーバーでレンダリングするか、クライアントでレンダリングするか」。

RSC (Server Components)
サーバー側でレンダリングされるコンポーネント。JSバンドルサイズを減らせる。
調理済み vs 材料セット (Pre-cooked vs Meal Kit)

RSC（Server Components）は「調理済みの料理」です。レンジで温めるだけ（HTMLを表示するだけ）ですぐ食べられます。 Client Componentsは「ミールキット（材料セット）」です。届いてからキッチン（ブラウザ）で調理（JS実行）が必要です。

Server Component (Default)

RSC Example
// Server Component (Default in Next.js App Router)
async function ProductList() {
  // Direct DB access allowed here!
  const products = await db.products.findMany();


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