Server Components (RSC) はサーバー上でレンダリングされ、シリアライズされた結果をブラウザに送ります。自身のための JavaScript はゼロで、コードではなくデータ/マークアップのみを送ります。
2 つの種類
jsx
() {
product = db..(id);
;
}
;
() {
[qty, setQty] = ();
;
}
| Server Component | Client Component | |
|---|---|---|
await / データの直接取得 | ✅ | ❌ |
| サーバーリソース/シークレットへのアクセス | ✅ | ❌ |
useState/useEffect/イベント | ❌ | ✅ |
| ブラウザへの JS の送信 | ❌(ゼロ) | ✅ |
サーバー→クライアントの境界を越えて渡す props はシリアライズ可能でなければなりません。関数やクラスのインスタンスは渡せません。RSC は「すべてがブラウザで動く」というメンタルモデルを、「デフォルトでサーバー上でレンダリングし、インタラクティブ性が必要な箇所だけクライアントを選択する」へと変えます。