先生と生徒の会話形式で理解しよう

生徒

「Next.jsって、データを取りにいく場所がサーバーとブラウザで違うって聞いたんですが、本当ですか？」

先生

「そうですね。Next.jsでは、サーバーで動く部品と、ブラウザで動く部品が分かれています。」

生徒

「Client Componentsでデータを取るときに、気をつけることはありますか？」

先生

「あります。特に通信のタイミングや書き方を理解しておかないと、思わぬトラブルにつながります。」

1. Next.jsのClient Componentsとは何か

Next.jsのClient Componentsとは、ブラウザの中で動く部品のことです。ブラウザとは、ChromeやEdgeなど、インターネットを見るためのソフトのことを指します。ボタンを押したときに画面が変わる、入力した文字をすぐに反映する、こういった動きはClient Componentsが担当します。

Next.jsでは、何も書かないとサーバーで動く部品になります。Client Componentsとして使いたい場合は、ファイルの一番上に "use client" と書きます。これは「この部品はブラウザで動かします」という合図のようなものです。

2. クライアントフェッチとは何をしているのか

クライアントフェッチとは、ブラウザからインターネット通信を行い、データを取りにいくことです。たとえば、天気情報や商品一覧などを、画面が表示されたあとに読み込む場合に使われます。

これは「あとから必要な情報を取りにいく」イメージです。冷蔵庫にある材料だけで料理を始めて、足りないものがあったら近くのお店に買いに行く、そんな感覚に近いです。

3. Client Componentsでフェッチする基本的な書き方

Client Componentsでは、Reactの仕組みを使ってデータを取得します。よく使われるのが useEffect と useState です。 useEffect は「画面が表示されたあとに実行する処理」、 useState は「値を保存して画面に反映する箱」のようなものです。


"use client";
import { useEffect, useState } from "react";

export default function Page() {
  const [message, setMessage] = useState("読み込み中です");

  useEffect(() => {
    setMessage("データを取得しました");
  }, []);

  return <p>{message}</p>;
}

画面を開くと「読み込み中です」と表示され、その後「データを取得しました」に変わります。

4. クライアントフェッチで注意するポイント

Client Componentsでフェッチを行うときの注意点として、通信は必ずブラウザで行われます。そのため、画面が表示されてからデータを取りに行くまで、少し時間がかかることがあります。

何も考えずに書くと、画面が真っ白になったり、同じ通信を何度も繰り返したりします。初心者のうちは「いつ通信が行われるのか」を意識することが大切です。

5. useEffectの書き方を間違えない

useEffect は書き方を間違えると、通信が何度も実行されます。依存配列と呼ばれる部分を空にすることで、「最初の一回だけ実行する」という意味になります。


"use client";
import { useEffect } from "react";

export default function Sample() {
  useEffect(() => {
    console.log("一度だけ実行されます");
  }, []);

  return <p>確認用コンポーネント</p>;
}

画面を表示したときに、一度だけ処理が動きます。

6. フェッチ中の表示を用意する

クライアントフェッチでは、通信中の状態を画面に出すことが重要です。何も表示されないと、壊れているように見えてしまいます。そのため、「読み込み中」という表示を必ず用意します。


"use client";
import { useState } from "react";

export default function LoadingSample() {
  const [loading, setLoading] = useState(true);

  return (
    <div>
      {loading ? <p>読み込み中です</p> : <p>完了しました</p>}
      <button onClick={() => setLoading(false)}>切り替え</button>
    </div>
  );
}

最初は「読み込み中です」と表示され、ボタンを押すと「完了しました」に変わります。

7. Client Componentsで扱わない方がよい処理

個人情報や秘密の情報を扱う処理は、Client Componentsでは行いません。ブラウザで動くということは、誰でも中身を見ることができるからです。

大事な処理はサーバー側で行い、Client Componentsは画面表示や操作に集中させる、これがNext.jsを安全に使う基本的な考え方です。

8. Client Componentsでのフェッチを理解するコツ

初心者のうちは、「画面が表示されたあとに動く処理」という意識を持つと理解しやすくなります。 Client Componentsは、ユーザーの操作に反応するための仕組みです。

まずは表示、次に通信、その結果を画面に反映する。この流れを頭の中でイメージできるようになると、Next.jsのClient Componentsがぐっと分かりやすくなります。

まとめ

ここまで、Next.jsにおけるClient Componentsとクライアントフェッチの基本から注意点までを順番に見てきました。 Client Componentsはブラウザ上で動作するため、ユーザーの操作にすぐ反応できる一方で、通信のタイミングや状態管理を意識しないと、表示が不安定になったり、意図しない挙動を引き起こしたりします。特に初心者の方は、「なぜ画面が一瞬空白になるのか」「なぜ同じ処理が何度も実行されるのか」といった点でつまずきやすいですが、これはClient Componentsの特性を知らないまま使ってしまうことが原因である場合がほとんどです。

Client Componentsでは、ファイルの先頭にuse clientを書くことで、ブラウザで動くことが明確になります。そのうえで、useStateを使って状態を保持し、useEffectを使って画面表示後の処理を記述するという流れを理解することが重要です。クライアントフェッチは「画面が表示されたあとにデータを取りに行く」という考え方が基本になるため、サーバー側であらかじめデータを用意する方法とは役割が異なります。この違いを理解することで、Next.jsの構造そのものが整理され、どこに何を書くべきかが見えてきます。

また、通信中の状態を何も表示しないままにすると、ユーザーから見て不親切な画面になります。そのため、「読み込み中」「取得中」といった表示を用意することは、見た目の問題だけでなく、操作している人に安心感を与えるという点でも大切です。 Client Componentsは見た目と操作を担当する存在なので、ユーザーの視点に立った実装を意識することで、より使いやすい画面を作れるようになります。

さらに、Client Componentsでは扱わない方がよい処理についても理解しておく必要があります。ブラウザで動くコードは誰でも確認できるため、秘密情報や重要な処理を直接書くのは避けるべきです。安全性を意識した設計として、重要な処理はサーバー側に任せ、Client Componentsは表示と操作に集中させる、という役割分担がNext.jsを安心して使い続けるための基本姿勢になります。

以下は、Client Componentsの考え方を整理するためのシンプルなサンプルです。状態の変化と画面表示の関係を改めて確認してみましょう。


"use client";
import { useState } from "react";

export default function SummarySample() {
  const [text, setText] = useState("最初の表示です");

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText("状態が更新されました")}>
        更新する
      </button>
    </div>
  );
}

画面には最初「最初の表示です」と出て、ボタンを押すと「状態が更新されました」に切り替わります。

このように、Client Componentsでは状態と表示が直結しているため、状態が変わると自動的に画面が更新される仕組みになっています。クライアントフェッチでも同じ考え方を使い、取得したデータを状態として保持し、その状態を画面に反映させることで、動きのある画面を作ることができます。流れとしては「初期表示」「通信開始」「データ取得」「表示更新」という順番を意識すると、実装時に混乱しにくくなります。

先生と生徒の振り返り会話

生徒

「Client Componentsって、ただReactが動くだけじゃなくて、いつ処理が実行されるかをちゃんと考えないといけないんですね」

先生

「その通りです。特にクライアントフェッチは画面表示後に動くので、サーバー側との違いを意識できるようになると理解が一気に深まりますよ」

生徒

「useEffectの依存配列を空にする意味も、ようやく分かってきました。何度も通信される理由が自分の書き方だったんですね」

先生

「気づけたのは大きいですね。Client Componentsは便利ですが、書き方を理解していないと動きが見えにくくなります。今回の内容を意識すれば、安定した実装ができるようになりますよ」

生徒

「まずは表示と状態、通信の流れを頭の中で整理することが大切なんですね。これからは焦らずに、一つずつ確認しながら書いてみます」

先生