【Next.js】CSRとは…?

はじめに

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

• CSR
• SSR
• SSG
• ISR

今回のテーマはCSRです。

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

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

Tomokiの技術ブログ

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

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

Tomokiの技術ブログ

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

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

Tomokiの技術ブログ

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

CSR

CSRはClient Side Renderingの略で、クライアント側でデータフェッチを行い、レンダリングをするものになります。

ブラウザでとあるURLにアクセスすると空のHTMLとJSが返却されます。

クライアントに返却されたJSが実行されて、データを取得し、HTMLを構築する流れとなります。

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

CSRでは、JSの読み込みからデータ取得、レンダリングをすべてクライアントで実施するので、アプリケーションのパフォーマンスとページの読み込み速度に影響を与える可能性があります。

また、初回アクセス時にサーバから返されるHTMLがほぼ空のファイルなのでクローラーがコンテンツを認識できない場合があるためSEOが不利になることがあります。

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

CSRはどんな時に使う?

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

CSRの実装

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

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

useEffectがわからないという方は以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【React.js】React hookを理解する！ ~ useEffect編 ~ この記事ではReactにおけるuseEffectの使用方法を解説します。useEffectを使用することでReactのレンダリングを後まで遅らせることができます。useEffectの使い方がわから…

import { useEffect, useState } from 'react'

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

  useEffect(() => {
    setLoading(true)
    fetch('https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        console.log(data)
        setLoading(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 default Address;

参考

あわせて読みたい

Data Fetching: Client side | Next.js Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on …

まとめ

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

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