Client-side Rendering (CSR)

Reactによるクライアント・サイド・レンダリング（CSR）では、
ブラウザは最小限のHTMLページと、
そのページに必要なJavaScriptをダウンロードする。

JavaScriptは、DOMを更新してページをレンダリングするために使用されます。
アプリケーションが最初にロードされたとき、
ユーザーはページ全体を見るまでに若干の遅れを感じるかもしれない。
これは、すべてのJavaScriptがダウンロードされ、
解析され、実行されるまで、ページが完全にレンダリングされないため。

ページが初めてロードされた後、必要なデータだけがフェッチされ、
JavaScriptがページ全体をリフレッシュすることなく、
ページの一部を再レンダリングできるため、
同じウェブサイト上の他のページへの移動が通常より速くなる。

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

その1

サーバーサイド・レンダリング・メソッド（getStaticPropsとgetServerSideProps）の代わりに、ページ内でReactのuseEffect()フックを使用する。

その2

SWRやTanStack Queryのようなデータ取得ライブラリを使用して、
クライアント上でデータを取得する（推奨）。

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>
}

上の例では、コンポーネントはLoading...のレンダリングから始まる。
そして、データが取得されると、再レンダリングしてデータを表示。

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

// 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>
}

CSRはSEOに影響を与える可能性がある。
検索エンジンのクローラーによっては、JavaScriptを実行しないため、
アプリケーションの最初の空または読み込み状態しか見ないかもしれない。
また、インターネット接続やデバイスの速度が遅いユーザーにとっては、
完全なページを表示する前にすべての JavaScript の読み込みと実行を待つ必要があるため、
パフォーマンスの問題につながる可能性がある。

Next.jsでは、アプリケーションの各ページのニーズに応じて、
サーバーサイドレンダリング、静的サイト生成、クライアントサイドレンダリングを組み合わせて使用できるハイブリッドアプローチを推進しています。
App Router では、Loading UI with Suspense を使用して、
ページのレンダリング中にローディング インジケータを表示することもできる。