クライアントサイドレンダリング (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) => {
      // handle the error as needed
      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を使用したローディングUIを使用して、ページがレンダリングされている間にローディングインジケーターを表示することもできます。