コンテンツへスキップ
アプリケーションの構築レンダリングクライアントサイドレンダリング (CSR)

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

Reactを使ったクライアントサイドレンダリング (CSR) では、ブラウザは最小限のHTMLページと、そのページに必要なJavaScriptをダウンロードします。その後、JavaScriptがDOMを更新し、ページをレンダリングするために使用されます。アプリケーションが初めてロードされる際、ユーザーはページ全体が表示されるまでにわずかな遅延を感じることがあります。これは、すべてのJavaScriptがダウンロード、解析、実行されるまでページが完全にレンダリングされないためです。

ページが最初にロードされた後、同じウェブサイト内の他のページに移動する際は、必要なデータのみをフェッチすればよく、JavaScriptがページの一部を再レンダリングできるため、通常は高速です。これにより、ページ全体の再読み込みは不要になります。

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

  1. サーバーサイドレンダリングメソッド(getStaticPropsおよびgetServerSideProps)の代わりに、ページ内でReactのuseEffect()フックを使用する。
  2. SWRTanStack 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では、Suspenseを使用したローディングUIを使用して、ページがレンダリングされている間にローディングインジケーターを表示することもできます。