【Next.js】SSRとは…?

はじめに

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

• CSR
• SSR
• SSG
• ISR

今回のテーマはSSRです。

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

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

Tomokiの技術ブログ

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

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

Tomokiの技術ブログ

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

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

Tomokiの技術ブログ

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

SSR

SSRはServer Side Renderingの略で、サーバ側でデータフェッチを行い、レンダリングしたHTMLをクライアントに返すものになります。

ブラウザでとあるURLにアクセスするとサーバにリクエストを行い、サーバ上でデータを取得してレンダリングしたHTMLが返却されます。

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

SEOにも対応可能になります。

SSRでは、サーバ上でデータ取得、レンダリングをすべてクライアントで実施しますが、やはりサーバ上でのデータ取得に時間がかかってしまう場合があります。

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

SSRはどんな時に使う?

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

SSRの実装

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

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

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 getServerSideProps() {
  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について解説しました。

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