【Next.js】SSGとは…?

はじめに

この記事ではNext.jsを使用する上で避けられない以下のレンダリング(=データフェッチ)について解説してきます。

• CSR
• SSR
• SSG
• ISR

今回のテーマはSSGです。

SSG以外も記事にしていますので興味がある方は是非ご覧ください！

CSRについては以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】CSRとは…? この記事ではNext.jsを使用する上で避けては通れない概念であるCSRについて解説します。CSRはクライアント側でデータフェッチを行い、レンダリングをするものです。CSRがよ…

SSRについては以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】SSRとは…? この記事ではNext.jsを使用する上で避けては通れない概念であるSSRについて解説します。SSRはサーバ側でデータフェッチを行い、レンダリングしたHTMLを返すものです。SSRが…

ISRについては以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】ISRとは…? この記事ではNext.jsを使用する上で避けては通れない概念であるISRについて解説します。ISRはSSGのようにビルド時にサーバ側でデータフェッチを行い、レンダリングしたHTML…

SSG

SSGはStatic Site Generationの略で、ビルド時にサーバ側でデータフェッチを行い、レンダリングしたHTMLを生成します。

ブラウザでとあるURLにアクセスするとビルド時に生成した静的ファイル(HTML)を返します。

イメージ図としては以下のような図になります。

SSGのようにビルド時に事前にデータフェッチをしてレンダリングをする方式のことをプリレンダリング(Pre-Rendering)と言います。

データの取得をビルド時に行うので、ページのデータを更新する際は再度ビルドする必要があります。

SSGでは、データの取得をビルド時に行うので、ページのデータを更新する際は再度ビルドをする必要があります。

SSGを使用しつつもデータを動的に更新したい場合があると思います。

このSSGのデメリットを解消したものがISRになります。

SSGはどんな時に使う?

以下の観点に当てはまる場合はSSGを使用すると良いでしょう。

Vercelの公式では、基本的にはSGGが推奨されています。

SSGの実装

SSGの実装例を紹介します。

よくやる実装方法としてはgetStaticPropsを使用してデータフェッチを行います。

import { useState } from 'react'

function Address({ data }) {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)

  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>

  return (
    <div>
      <h1>{data.results[0].address1}</h1>
      <p>{data.results[0].address2}</p>
      <p>{data.results[0].address3}</p>
    </div>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060')
  const data = await res.json()

  return { props: { data } }
}

export default Address;

参考

あわせて読みたい

Basic Features: Pages | Next.js Next.js pages are React Components exported in a file in the pages directory. Learn how they work here.

まとめ

本記事ではNext.jsにおけるデータフェッチのSSRについて解説しました。

是非、いいねやコメントをお願いします。