【入門編】 React Server Componentsと副作用の制限 – React実践ガイド

こんにちは。Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお話ししたいことがあります。

Reactを学び始めると、必ずと言っていいほど「`useEffect`」という不思議な道具に出会いますよね。「ここでAPIからデータを取ってきて…」「ボタンを押した後にこの処理をして…」なんて、魔法のように画面を動かすための必須アイテムです。

しかし最近、Reactの世界には「React Server Components（RSC）」という新しい風が吹き込んでいます。そして、この新しい仕組みでは、なんと「`useEffect`」が使えないのです。

「えっ、じゃあどうやって動かすの？」と不安に思った方、大丈夫です。今日はこの「なぜ使えないのか」、そして「どう考え方を変えればいいのか」を、お買い物の流れに例えて紐解いていきましょう。

—

まず、`useEffect`が何をしているのかを、レストランで例えてみましょう。

サーバーコンポーネント： 注文を受けたキッチン（サーバー）で、料理（データ）を完璧に作り上げて提供する専門家。
クライアントコンポーネント（useEffect）： お客さんのテーブルの横で、「お水が減ったら注ぐ」「メニューを落としたら拾う」といった、「お客さん（ブラウザ）の動きに合わせてその場で対応するホールスタッフ」です。

これまで私たちは、「キッチンで料理を作る」ことと「ホールで接客する」ことを、同じReactのコンポーネントという場所で混ぜて書いていました。しかし、これだとキッチン（サーバー）で接客をしようとしてエラーになったり、逆にホールでお皿を焼こうとして火傷したりと、混乱が起きていたんです。

React Server Componentsは、「キッチンはキッチン、ホールはホールで完全に役割を分けようぜ！」という、非常に合理的でクリーンな方針なのです。

—

答えはシンプルです。「サーバーには『ブラウザの画面』が存在しないから」です。

`useEffect`は、「ブラウザに画面が表示された後に、何かをする」という仕組みです。でも、サーバーはあくまで「HTMLの設計図」を書いている場所。そこにブラウザの画面はまだありません。

もしサーバーサイドで「画面が表示されたら…」なんて処理を書こうとしたら、存在しないものに話しかけるようなもの。だからReactは「ここではそんなことできないよ！」と教えてくれているんですね。

—

これまでのように「コンポーネントを読み込んだら、`useEffect`の中で`fetch`してデータを取ってくる」必要は、もうありません。

サーバーコンポーネントでは、直接データを取ってくることができます。まるで、「注文を受けた瞬間に、キッチンで材料を冷蔵庫から取り出す」ような感覚です。

// クライアント側で「表示された後に」データを取得する
function UserList() {
const [users, setUsers] = useState([]);

useEffect(() => {
// 画面が表示された後、重い通信が始まる
fetch(‘/api/users’).then(res => res.json()).then(setUsers);
}, []);

return

{/ ユーザーリストを表示 /}

;
}

// サーバー側でデータを取得し終わってから画面を作る
async function UserList() {
// サーバーの力で直接データを取る。useEffectは不要！
const users = await db.users.findMany();

return (

)}

);
}

どうでしょう。コードが驚くほどスッキリしましたよね。`useEffect`で「読み込み中（loading）」の管理をしたり、エラーの処理をしたりする泥臭い作業が、サーバーサイドのシンプルな処理に置き換わったのです。

—

「でも、ボタンを押した時のクリックイベントや、画面のスクロールに合わせた動きはどうするの？」という疑問が浮かぶはずです。

その場合は、「クライアントコンポーネント」を切り出すというテクニックを使います。

1. サーバーコンポーネント： データの取得と、基本的なHTMLの組み立てを担当。
2. クライアントコンポーネント： `useEffect`や`useState`が必要な「動きのある部分」だけを、別の部品として切り出して配置。

ファイルの一行目に `’use client’;` と書くことで、そこだけが「ホールスタッフ」として働いてくれるようになります。

—

Reactの進化は速く、新しい用語に圧倒されることもあるかもしれません。でも、本質は常に「ユーザーにどうやってスムーズに体験を届けるか」という一点にあります。

`useEffect`が使えない場所があるのは、決して制限ではなく、「より速く、より安全に動くためのガイドライン」だと捉えてみてください。

まずは「これはサーバーでできることかな？それともブラウザでしかできない（画面の動きが必要な）ことかな？」と、頭の中で少しだけ整理するクセをつけてみてください。その小さな一歩が、いつかあなたを素晴らしいフロントエンド・エンジニアへと導いてくれるはずです。

何かわからないことがあれば、いつでもまた聞きに来てくださいね。一緒に一歩ずつ、進んでいきましょう！