厨房でいただくご馳走データ｜第4回 Next.js入門

著者: 管理者 / 2025-08-17 (更新: 2025-08-17)

先生〜、前回はお屋敷の廊下や扉を整えて、すっかり歩きやすくなりましたわね✨
でも……お部屋を回ってみても、まだ空っぽのお部屋ばかりで、少し寂しい気がいたしますの。
せっかくのお茶会なのですから、ご馳走やお菓子が欲しいですわ〜🍰☕️

ふふ、良い気づきです。
お部屋（ページ）を作っただけでは、確かに何もありません。
今日は「データ」というご馳走を厨房から運んでくる方法を学びましょう。
Next.jsの大きな魅力のひとつが、この「データの取り扱い」なのです。

お屋敷の廊下を歩くように｜第3回 Next.js入門

📝 データフェッチとは？

「データフェッチ」とは、外部やサーバーから情報を取得してページに表示することです。
例えば……

ブログ記事一覧を表示する
商品情報をカタログに並べる
天気予報やニュースを読み込む

これらは「厨房から材料を取り寄せて、テーブルに並べる」ようなもの。
Next.jsには、状況に応じて 3つの厨房スタイル があります。

SSR（サーバーサイドレンダリング）
ページに入るたびに厨房から料理を運んでくる（常に新鮮）。
SSG（静的サイト生成）
あらかじめ厨房で料理を用意しておき、すぐに出せる（とても速い）。
CSR（クライアントサイドレンダリング）
お客さまが席に着いてから、追加で料理を注文する（後から取ってくる）。

まあ！まるでビュッフェとオーダー料理の違いのようですわね✨
どれを選ぶかで、体験が変わってしまいますのね。

ええ、おっしゃる通りです。
実際のサイトでは「いつも変わるデータか」「固定のデータか」に応じて、最適な方法を選びます。
では、それぞれのやり方を少しずつ見ていきましょう。

📝 SSRの例（厨房から毎回運ぶ）

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return { props: { data } }
}

export default function Page({ data }) {
  return <div>今日のおすすめ料理: {data.title}</div>
}

getServerSideProps を使うと、ページを開くたびにサーバーでデータを取得します。
そのため「常に最新の料理」を提供できるのです。

📝 SSGの例（あらかじめ仕込み）

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/menu')
  const menu = await res.json()

  return { props: { menu } }
}

export default function MenuPage({ menu }) {
  return (
    <ul>
      {menu.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  )
}

getStaticProps を使うと、ビルド時に一度だけデータを取得します。
レストランで前日に仕込んでおいた料理のように、超高速で出せます。

📝 CSRの例（あとから注文）

import { useEffect, useState } from 'react'

export default function ClientPage() {
  const [news, setNews] = useState([])

  useEffect(() => {
    fetch('https://api.example.com/news')
      .then(res => res.json())
      .then(data => setNews(data))
  }, [])

  return (
    <div>
      <h1>速報ニュース</h1>
      <ul>
        {news.map(n => <li key={n.id}>{n.title}</li>)}
      </ul>
    </div>
  )
}