︙

Client-side Rendering (CSR)

クライアントサイドレンダリング(CSR)では、 React を使用して、ブラウザは最小限の HTML ページとそのページに必要な JavaScript をダウンロードします。次に、その JavaScript で DOM を更新し、ページを render します。アプリケーションが初めてロードされると、ユーザーは完全なページが表示されるまでにわずかな遅延を感じるかもしれません、これはページがすぐにレンダリングされず、すべての JavaScript がダウンロードされ、解析され、実行されるまで待たなければならないからです。

ページが初めて読み込まれた後、同じウェブサイトの他のページに移動することは通常、必要なデータのみを取得する必要があるため、より速くなります。そして、JavaScript はページの一部を再レンダリングすることができ、完全なページの refresh を必要とせずに済みます。

Next.js では、Client サイドレンダリングを実装する方法が 2 つあります：

ページ内で React のuseEffect()の hook を使用し、server-side rendering の方法 (getStaticProps と getServerSideProps) の代わりに使用します。
SWR や TanStack Query のようなデータ取得の library を使用して client 上でデータを fetch すること(推奨)。

これは、Next.js ページ内でuseEffect()を使用する一例です：

pages/index.js

import React, { useState, useEffect } from 'react'

export function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }

    fetchData().catch((e) => {
      // handle the error as needed
      console.error('An error occurred while fetching the data: ', e)
    })
  }, [])

  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

上記の例では、component はLoading...をレンダリングすることから始まります。その後、データがフェッチされると、再レンダリングしてデータを表示します。

useEffectでデータを取得することは古い React アプリケーションで見かけるパターンかもしれませんが、より高いパフォーマンス、キャッシング、楽観的な更新などを実現するために、データフェッチングの library の利用を推奨します。以下にSWR を使用して client 上でデータを fetch する最小の例を示します：

pages/index.js

import useSWR from 'swr'

export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )

  if (error) return <p>Failed to load.</p>
  if (isLoading) return <p>Loading...</p>

  return <p>Your Data: {data}</p>
}

Good to know:

CSR が SEO に影響を与える可能性があることを頭に入れておいてください。一部の検索エンジンのクローラーは JavaScript を実行しないかもしれません。そのため、あなたのアプリケーションの初期の empty または Loading の状態だけを見る可能性があります。また、すべての JavaScript がロードされて実行されるまで待つ必要があるため、インターネット接続やデバイスの遅いユーザーにとってはパフォーマンスの問題にもつながる可能性があります。Next.js はserver-side rendering、static site generation、そして Client サイドレンダリングの組み合わせを使用するハイブリッドアプローチを推進しています。これは、あなたのアプリケーションの各ページのニーズに応じてです。また、App Router では、ページがレンダリングされている間に loading インジケータを表示するために loading UI with Suspenseも使用できます。