1. Next.js Server Componentsとは何か

Next.jsのServer Componentsとは、サーバー上で動く特別なコンポーネントです。コンポーネントとは、画面の部品のことです。ボタンや文字のかたまりをイメージしてください。通常のReactでは、これらはブラウザ側で動きますが、Server Componentsはサーバーで動きます。

サーバーで動くということは、ユーザーのパソコンに届く前に処理が終わっている状態です。料理でたとえると、キッチンで完成した料理をお皿にのせて出すようなものです。

2. fetchとは何をするものか

fetchとは、データを取りに行くための命令です。たとえば、天気予報や商品一覧など、外部の情報を取得するときに使います。初心者の方は「インターネットから情報を取ってくる魔法の命令」くらいに考えて大丈夫です。

Next.jsでは、このfetchが標準で用意されており、特別な設定をしなくても使えます。

3. Server Componentsでfetchが最強な理由① サーバーで完結する

Server Componentsのfetchは、サーバー側で実行されます。つまり、データを取る処理がブラウザに届く前に終わっています。そのため、画面表示が速く、無駄な通信が減ります。

ユーザーのパソコン性能に左右されにくいのも大きな特徴です。


export default async function Page() {
  const res = await fetch("https://example.com/api/message");
  const data = await res.json();

  return <h1>{data.message}</h1>;
}

（サーバーでデータを取得し、その結果が画面に表示されます）

4. Server Componentsでfetchが最強な理由② キャッシュが自動で効く

Next.jsのfetchは、自動でキャッシュを管理します。キャッシュとは、一度取ってきたデータを覚えておく仕組みです。ノートに答えを書いておき、次に同じ質問が来たら見返すようなイメージです。

これにより、同じデータを何度も取りに行かず、表示がさらに速くなります。


export default async function News() {
  const res = await fetch("https://example.com/api/news", {
    cache: "force-cache",
  });
  const news = await res.json();

  return <p>{news.title}</p>;
}

（一度取得したニュース情報が再利用されます）

5. Server Componentsでfetchが最強な理由③ 非同期処理が自然

非同期処理とは、待ち時間が発生する処理のことです。データ取得は時間がかかるため、この仕組みが必要です。

Server Componentsでは、asyncとawaitをそのまま使えます。難しい書き方を覚えなくても、上から順に読めるコードになります。


export default async function Profile() {
  const res = await fetch("https://example.com/api/profile");
  const profile = await res.json();

  return <div>{profile.name}</div>;
}

6. クライアントコンポーネントとの違い

クライアントコンポーネントは、ブラウザで動くコンポーネントです。ボタン操作や入力フォームなど、動きのある部分に向いています。

一方で、データ取得や表示だけならServer Componentsが適しています。適材適所で使い分けることが重要です。

7. fetchとServer Componentsの組み合わせが向いている場面

記事一覧、商品リスト、プロフィール表示など、最初から表示したい情報は Server Componentsとfetchの組み合わせがとても向いています。

画面が開いた瞬間に情報がそろっているため、利用者の体験も良くなります。


export default async function Products() {
  const res = await fetch("https://example.com/api/products");
  const products = await res.json();

  return (
    <ul>
      {products.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

（商品一覧が最初から画面に表示されます）