Server ComponentとClient Component

■ Server Componentとは？

デフォルト。

export default async function Page() {}

特徴：

• DBアクセスできる

• Prisma使える

• async可能

• await可能

• ブラウザAPI使えない　

• 実行場所：サーバー

■ Client Componentとは？

"use client"

がついているファイル。

特徴：

• useState使える

• useEffect使える

• ブラウザAPI使える

• Clientは直接DBに触れない（必ずServer経由）

• Client Componentの“コンポーネント本体”はasync不可

• 実行場所：ブラウザ

■ なぜ分けるの？

理由はパフォーマンス。

Serverでやるべきこと：

• DB取得

• 重い計算

• 秘密情報処理

Clientでやるべきこと：

• UI操作

• 状態管理

• アニメーション

なぜuseStateはServerで使えない？

Serverは：

• 1回実行して終わり

• 状態を持たない

useStateは：

• ボタン押す

• 状態変わる

• 再描画

これはブラウザでしかできない。

Server Componentは：

👉 「完成したHTMLだけ」をブラウザに渡す

Client Componentは：

👉 「動くためのJS」をブラウザに渡す

つまり:

初期表示はServerが強い

操作の即応性はClientが強い

serverが早い理由

① ブラウザに送るJSが少ない

Server Componentは：

• DB取得

• データ整形

• HTML生成

をサーバー側で全部やる。

ブラウザには：

👉 完成したHTMLだけ送る

だから：

• JSが少ない

• ダウンロードが軽い

• 解析も少ない＝ 速い

② DBに近い場所で処理している

Serverは：

• DBと同じデータセンター内

• ネットワークが速い

Clientは：

• ユーザーの家のWiFi

• 海外回線かもしれない

Serverで取ったほうが速い。

③ Hydrationが不要（または少ない）

Client Componentは：

1. HTMLが届く

2. JSが届く

3. JSが実行される

4. Reactが紐づけ（Hydration）

これが時間かかる。

Server Componentは：

👉 JSがほぼ無い

👉 Hydrationが不要

だから軽い。

💡 じゃあClientが必要なのは？

• モーダル開閉

• 入力中のバリデーション

• リアルタイム検索

• カウントアップUI

• アニメーション

ページ遷移なしで、入力イベントに応じて即時にUIを更新したいなら、Client

ちなみに、リアルタイム絞り込みは 2パターン ある。

A) ブラウザ内で即時フィルタ（Clientが向く）

• すでに取得した一覧を、手元で filter() する

• 体感が速い

• ただし 全件を最初に持ってくる ので、件数が多いと重い

→ このときは Client が基本。

B) 入力のたびにサーバー検索（Client “も”使うが、DB処理はServer）

• 入力値は Client で持つ（状態）

• でも検索は Route Handler / Server Action を呼ぶ（Server）

• 大量データ向き・正確

→ 「Clientが必要」というより

“UIはClient、検索はServer” が正解。

ではなぜ「ClientはDBを知らない」のか？

① Prismaはサーバー専用

Prismaは、node.jp専用ライブラリで、ブラウザでは動かない。

② セキュリティ

もしClientから直接DB接続できたら：

• DBパスワードがブラウザに露出

• 全ユーザーが直接SQL実行可能

破滅

③ アーキテクチャ

Webの基本構造はこれ：

ブラウザ → サーバー → DB

直接：

ブラウザ → DB

にはしない。

なぜこの設計が重要？

① セキュリティが保たれる

DB情報はサーバーだけ

② パフォーマンスが上がる

初期HTMLはサーバーで生成できる

③ 役割が明確になる

Server = データ

Client = UI

つまり:

Client Componentはデータ取得しない。

Server Componentが取得して渡す。

私のコードの例

Step 1（Server側）

const score = await prisma.score.findUnique()

これはサーバーで実行される。

Step 2（Reactの仕組み）

return <ScoreDetail score={score} />

ここで：

データをpropsとしてUIに渡している

Step 3（Client側）

export default function ScoreDetail({ score }) {}

ここはブラウザ。

ここにはもう、ただのJSONデータしか届いていない。Client ComponentはDBから取得した“結果”しか知らない。取得方法も、Prismaも、SQLも知らない。