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

Reactを使用したクライアントサイドレンダリング (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('An error occurred while fetching the data: ', e)
    })
  }, [])
 
  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

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

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>Failed to load.</p>
  if (isLoading) return <p>Loading...</p>
 
  return <p>Your Data: {data}</p>
}

補足：

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