クライアントサイドレンダリング (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を使用することもできます。