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>
);
}