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

生徒

「Next.jsにはgetStaticPropsとgetServerSidePropsってありますけど、何が違うんですか？」

先生

「どちらもページを表示する前にデータを準備する仕組みです。ただし、準備するタイミングが大きく違います。」

生徒

「タイミングが違うって、いつデータを取ってくるかってことですか？」

先生

「その通りです。これから図をイメージしながら、ゆっくり説明していきます。」

1. Next.js Pages Routerとは何か？

Next.jsのPages Routerとは、pagesフォルダの中にファイルを置くだけでWebページが作れる仕組みです。ファイル名がそのままURLになるので、初心者でも迷いにくいのが特徴です。

たとえば、pages/index.jsはトップページ、pages/about.jsは「aboutページ」になります。Next.jsでは、このPages Routerでページごとにデータを準備する方法として、getStaticPropsとgetServerSidePropsが用意されています。

2. getStaticPropsとは？静的にデータを準備する仕組み

getStaticPropsは、ページを事前に作るときにデータを取得する方法です。料理に例えると、お店が開く前にお弁当をたくさん作って並べておくイメージです。

一度作られたページは、アクセスする人が何人いても同じ内容が表示されるため、表示がとても速くなります。


export async function getStaticProps() {
  return {
    props: {
      message: "これは事前に用意されたメッセージです"
    }
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

（ページを開くと「これは事前に用意されたメッセージです」と表示されます）

3. getServerSidePropsとは？アクセスごとにデータを取得する仕組み

getServerSidePropsは、ページにアクセスされるたびにデータを取得します。これは注文を受けてから料理を作るレストランのような仕組みです。

毎回最新の情報を表示したい場合に向いていますが、その分ページ表示は少し遅くなります。


export async function getServerSideProps() {
  return {
    props: {
      time: new Date().toLocaleString()
    }
  };
}

export default function Page({ time }) {
  return <p>現在の時刻：{time}</p>;
}

（ページを更新するたびに表示される時刻が変わります）

4. getStaticPropsとgetServerSidePropsの違いを整理

この2つの大きな違いは「いつデータを取るか」です。getStaticPropsはビルド時、getServerSidePropsはアクセス時に実行されます。

ブログ記事や説明ページのように内容が頻繁に変わらない場合はgetStaticProps、ログイン情報や在庫数のように変わりやすい情報はgetServerSidePropsが向いています。

5. Pages Routerで使えるのはどっち？

getStaticPropsとgetServerSidePropsは、どちらもPages Router専用の機能です。App Routerでは別の方法でデータ取得を行います。

そのため、Pages Routerを使っているNext.jsのプロジェクトでは、この2つを理解することがとても重要になります。

6. 初心者がよくつまずくポイント

初心者の方が混乱しやすいのは、「画面の中で直接使えない」という点です。これらの関数はコンポーネントの外に書く必要があります。


export async function getStaticProps() {
  return { props: { title: "テストページ" } };
}

function Test({ title }) {
  return <h2>{title}</h2>;
}

export default Test;

データはpropsという形で画面に渡される、という流れを意識すると理解しやすくなります。