導入

前回は「SSG（静的生成）」についてまとめました。
今日はそれとよくセットで語られる SSR（Server Side Rendering） のお話。

SSGとSSR、名前が似ているけど仕組みも用途も違うので、初心者のうちにざっくり理解しておくと便利だと思いました☆

SSRってなに？

• ページを「アクセスがあった瞬間」にサーバーでレンダリングする仕組み
• 最新のデータを表示したいときに便利
• リアルタイム性が大事なサービス（ニュースサイトやダッシュボード）でよく使われる

つまり、

• SSG = 事前に作っておく
• SSR = リクエストごとに作る

こんなイメージです。

かんたんコード例

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

  return { props: { data } }
}

export default function Home({ data }) {
  return (
    <div>
      <h1>SSRのページ</h1>
      <p>APIから取得したデータ: {data.message}</p>
    </div>
  )
}

この getServerSideProps がSSRのポイント。
ページがリクエストされるたびに実行されて、APIから最新データを取ってきてくれます。

まとめ

• SSRは「アクセスごとにサーバーでHTMLをつくる」仕組み
• 最新情報を見せたいときに使う
• SSGとSSRを使い分けられるのがNext.jsの強み✨