混在（Server ↔ Client の境界）
実際のアプリでは、サーバーとクライアントを組み合わせて使います。 下の枠線が 青＝サーバー描画 / 緑＝クライアント描画 です。
パターン1: サーバーの値を props で渡す
🌐 CLIENT の箱（ブラウザで動く）
サーバーから props で受け取った値: 2026/6/12 15:20:17
パターン2: Client の中に Server を埋め込む
🌐 CLIENT の箱（ブラウザで動く）
サーバーから props で受け取った値: 2026/6/12 15:20:17
🖥️ SERVER の中身（サーバーで描画された子コンポーネント）
サーバー時刻: 2026/6/12 15:20:17
🔍 観察ポイント
- ターミナルには
[SERVER]系のログ、 ブラウザのコンソールには[CLIENT]系のログが出ます。同じページなのに出力先が分かれます。 - パターン2 の緑の箱（client）を「隠す/表示」しても、中の青い部分は サーバーで描画済みのもの。クライアントは受け取った結果を出し入れ しているだけです。