こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を乗り越えてきた身として、今日はみんなが一度は頭を抱える「useEffectとサーバーサイドレンダリング（SSR）の不思議な関係」についてお話しします。
「あれ、useEffectが動かないぞ？」「サーバーでは計算できないの？」そんな風に悩んでいませんか？大丈夫です。それはあなたが壊れているわけではなく、Reactがとても賢く、そして少しだけ慎重に動いている証拠なんです。
—
1. なぜサーバーは「useEffect」を無視するの？
まず、身近な例え話をしましょう。
あなたは今、「レストランの注文」をしていると考えてください。
- サーバーサイド（厨房）: ここは「料理を作る場所」です。お皿を並べて、食材を載せて、完成品をテーブル（ブラウザ）へ運ぶのが仕事です。
- クライアントサイド（テーブル）: ここは「お客さんが座る場所」です。お皿が届いた後、お客さんが「あ、お冷をください」「メニューをめくろう」とアクションを起こす場所ですね。
`useEffect` というのは、「料理が運ばれてきた後に、店員さんがテーブルに来てくれるサービス」のようなものです。
厨房（サーバー）で料理を作っている最中に、店員さんがテーブルに来て「お冷はどうしますか？」と聞いても、まだテーブルにお客さんは座っていませんよね？だから、サーバーでのレンダリング中、Reactは「今はまだ店員さんを呼ぶタイミングじゃないな」と判断して、`useEffect` の実行をスキップするんです。
2. ハイドレーション：魔法の接着剤
サーバーから送られてきた完成品（HTML）は、いわば「静かな写真」のようなもの。クリックしても反応しません。そこで、ブラウザに届いた瞬間にReactが「さあ、ここからが本番だ！」と、その写真に命を吹き込みます。これを「ハイドレーション（水分補給）」と呼びます。
このハイドレーションが終わった瞬間に、初めて `useEffect` が「お待たせしました！」と駆けつけてくるわけです。
3. 実践！サーバーとブラウザを区別してコードを書く
では、実際にコードを見てみましょう。SSR（Next.jsなど）を使っていると、「ブラウザでしか動かしてはいけないコード」をどう書くかが鍵になります。
import { useEffect, useState } from ‘react’;
export default function MyComponent() {
const [isClient, setIsClient] = useState(false);
// このuseEffectは、サーバーサイドでは実行されません。
// ブラウザにページが届き、Reactが「ハイドレーション」を完了した瞬間にだけ実行されます。
useEffect(() => {
console.log(“店員さんがテーブルに到着しました！”);
setIsClient(true);
}, []);
return (
ブラウザで動き出したら中身を表示する、という安全策です /}
{isClient ? (
ブラウザで元気に動いています！
) : (
サーバーで調理中です…（読み込み中）
)}
);
}
このコードのポイント
- 初期値は false: サーバーで作るときは、必ず「まだ準備中」という状態にします。
- useEffectで切り替え: ブラウザに届いたときだけ `true` に変えることで、サーバーとブラウザでの表示のズレ（エラーの原因）を防いでいるんです。
4. つまずいたあなたへ：大丈夫、焦らないで
「SSRで動かない」というエラーに出会うと、どうしても「自分のコードが間違っているのかな」と不安になりますよね。でも、それはReactが「サーバーは静かに、ブラウザは動的に」という分業をしっかり守ろうとしているからです。
もし困ったら、こう呟いてみてください。
「今はまだキッチンの中だから、接客（useEffect）は後回しなんだな」と。
この仕組みを理解すると、Reactは単なるライブラリから、頼もしい相棒に変わります。焦らず、少しずつ、この「サーバーとブラウザの往復」を楽しんでみてくださいね。
皆さんのWeb制作が、より楽しく、より快適なものになりますように！またいつでも聞きに来てくださいね。
コメント