クライアントサイドレンダリング (CSR)

クライアントサイドレンダリング（CSR）では、ブラウザは最小限のHTMLページとそのページに必要なJavaScriptをダウンロードします。その後、JavaScriptを使用してDOMを更新し、ページをレンダリングします。アプリケーションが最初に読み込まれる際、ユーザーは完全なページを表示するまでに若干の遅延に気づく可能性があります。これは、すべてのJavaScriptがダウンロード、解析、実行されるまでページが完全にレンダリングされないためです。

最初のページ読み込み後、同じウェブサイト内の他のページへの遷移は通常より高速になります。必要なデータのみをフェッチし、JavaScriptが完全なページリフレッシュなしでページの一部を再レンダリングできるためです。

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

1. サーバーサイドレンダリングのメソッド（getStaticPropsとgetServerSideProps）の代わりに、ページ内でReactのuseEffect()フックを使用する。
2. SWRやTanStack Queryなどのデータフェッチライブラリを使用してクライアント上でデータをフェッチする（推奨）。

Next.jsページ内でuseEffect()を使用する例：

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) => {
      // エラーを必要に応じて処理する
      console.error('データ取得中にエラーが発生しました: ', e)
    })
  }, [])
 
  return <p>{data ? `データ: ${data}` : '読み込み中...'}</p>
}

上記の例では、コンポーネントは最初に「読み込み中...」をレンダリングします。その後、データがフェッチされると再レンダリングしてデータを表示します。

useEffectでデータをフェッチすることは古いReactアプリケーションでよく見られるパターンですが、より優れたパフォーマンス、キャッシング、楽観的な更新などのために、データフェッチライブラリの使用をお勧めします。以下は、クライアント上でデータをフェッチするSWRを使用した最小限の例です：

import useSWR from 'swr'
 
export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )
 
  if (error) return <p>読み込みに失敗しました。</p>
  if (isLoading) return <p>読み込み中...</p>
 
  return <p>データ: {data}</p>
}

補足：

CSRはSEOに影響を与える可能性があることに注意してください。一部の検索エンジンクローラーはJavaScriptを実行しない可能性があり、アプリケーションの初期の空または読み込み状態のみを認識する可能性があります。また、インターネット接続が遅いデバイスやユーザーにとってはパフォーマンスの問題を引き起こす可能性があり、完全なページを表示するためにすべてのJavaScriptの読み込みと実行を待つ必要があります。Next.jsは、アプリケーション内の各ページのニーズに応じて、サーバーサイドレンダリング、静的サイト生成、クライアントサイドレンダリングを組み合わせるハイブリッドアプローチを推奨しています。App Routerでは、ページがレンダリングされている間にSuspenseを使用したローディングUIを表示することもできます。