こんにちは。Reactの迷宮へようこそ。
フロントエンドの最前線でコードを書き続けていると、「技術は常に進化するけれど、本質はいつもシンプルだ」と実感することがあります。
今日は、最近のReact界隈で一番の革命児である「React Server Components（RSC）」についてお話ししましょう。名前は少し堅苦しいですが、考え方はとてもシンプル。これまでのReactの常識を少しだけ「アップデート」する時間だと思って、肩の力を抜いて読んでくださいね。
—
1. 「レストラン」で例えるReactの世界
Reactの仕組みを理解するために、ちょっとしたレストランを想像してみてください。
- サーバー（厨房）： 食材を調理し、お皿に盛り付ける場所。
- クライアント（客席）： お客さんが座り、料理を食べたり、追加注文したりする場所。
これまでのReactは、「厨房で作った料理を、一旦全部客席に運んで、そこで盛り付けを直して完成させる」ようなことをしていました。つまり、ブラウザ（客席）に大量のJavaScriptを送り込んで、そこで必死に「画面を作っていた」んです。
RSCの登場：厨房で盛り付けまで終わらせる
React Server Components（RSC）は、「厨房（サーバー）で完全に料理を完成させて、お皿ごとお客さんに渡す」という仕組みです。
客席では、ただ届いた料理を食べるだけ。これなら、お客さん（ブラウザ）は重い荷物（JavaScript）を持たなくて済むので、サイトの表示が爆速になるというわけです。
—
2. 「サーバーコンポーネント」と「クライアントコンポーネント」の境界線
ここで、「えっ、じゃあ全部サーバーでやればいいの？」と思うかもしれません。でも、レストランには「追加注文」や「ドリンクのおかわり」が必要ですよね。
Reactには2つの役割があります。
1. サーバーコンポーネント (RSC)：
- データベースからデータを取ってきたり、重い計算をするのが得意。
- ブラウザでは動かない（JavaScriptがブラウザに送られない！）。
2. クライアントコンポーネント：
- ボタンを押した時の反応、アニメーション、フォーム入力など、「動的な体験」が得意。
- ファイルの一番上に `”use client”` と書くだけで、「ここは客席で動く場所です」と宣言できます。
どう使い分けるの？
基本は「サーバーコンポーネント」をデフォルトにすること。そして、クリックしたり、入力したりする「インタラクティブな場所」だけを `”use client”` にする。これが現代のReactの最適解です。
—
3. 実践！コードで見る境界線
実際に、簡単な「商品表示ページ」で見てみましょう。
サーバーコンポーネント（データ取得担当）
`ProductPage.js` のように、特に宣言を書かないものは自動的にサーバーで動きます。
// これはサーバーコンポーネント
// データベースから直接データを取ってきても、APIキーがブラウザに漏れないので安心！
async function ProductPage() {
const data = await fetch(‘https://api.example.com/items’); // サーバーでデータを取得
const items = await data.json();
return (
-
{items.map(item => (
- {item.name}
))}
);
}
クライアントコンポーネント（操作担当）
ボタンを押して「カートに入れる」といった動きが必要な場所だけ、切り出します。
“use client”; // これを書くと「ここから先はブラウザで動くよ」という合図
import { useState } from ‘react’;
export default function AddToCartButton() {
const [count, setCount] = useState(0);
return (
);
}
—
4. 初学者がつまずきやすいポイント
ここまで読んで、「なんだか難しそう…」と感じたあなた、大丈夫です。一番のつまずきポイントは「サーバーコンポーネントの中で、`useState` や `onClick` を使おうとしてエラーになる」ことです。
もしエラーが出たら、こう唱えてください。
「あ、ここはサーバー（厨房）だから、まだ動けないんだ。客席（クライアント）の部品に切り出そう」
RSCは、Reactが「サーバーとクライアントの役割を分担して、もっと効率よく働こうぜ！」と言っているだけなんです。
最後に：完璧主義を捨てよう
技術の進化は速く、RSCという新しい概念に戸惑うのは当然です。でも、最初からすべてを完璧に使いこなす必要はありません。
まずは、「表示するだけの部分はそのまま。動きが必要なパーツだけ `”use client”` を貼る」。この小さな一歩から始めてみてください。これだけで、あなたの作るWebサイトは確実に一歩先を行くものになります。
「コードを書くことは、誰かを笑顔にすること」。その本質さえ忘れなければ、Reactの新しい世界はきっと楽しい冒険になりますよ。
何か分からないことがあれば、いつでもまた聞きに来てくださいね。あなたの挑戦を、心から応援しています！
コメント