クライアントサイドでのデータ取得

クライアントサイドのデータ取得は、ページがSEOインデックスを必要としない場合、データを事前にレンダリングする必要がない場合、またはページのコンテンツを頻繁に更新する必要がある場合に役立ちます。サーバーサイドレンダリングAPIとは異なり、コンポーネントレベルでクライアントサイドのデータ取得を使用できます。

ページレベルで実行する場合、データは実行時にフェッチされ、データの変更に応じてページのコンテンツが更新されます。コンポーネントレベルで使用する場合、データはコンポーネントのマウント時にフェッチされ、データの変更に応じてコンポーネントのコンテンツが更新されます。

クライアントサイドのデータ取得がアプリケーションのパフォーマンスとページの読み込み速度に影響を与える可能性があることに注意することが重要です。これは、データ取得がコンポーネントまたはページのマウント時に行われ、データがキャッシュされないためです。

useEffectを使用したクライアントサイドのデータ取得

以下の例は、useEffectフックを使用してクライアントサイドでデータをフェッチする方法を示しています。

import { useState, useEffect } from 'react'
 
function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

SWRを使用したクライアントサイドのデータ取得

Next.jsチームは、データ取得用のReactフックライブラリであるSWRを作成しました。クライアントサイドでデータを取得する場合は、強く推奨されます。キャッシング、再検証、フォーカストラッキング、インターバルでの再フェッチなどを処理します。

上記と同じ例を使用して、SWRを使用してプロファイルデータをフェッチできます。SWRは自動的にデータをキャッシュし、データが古くなった場合は再検証します。

SWRの使用に関する詳細情報については、SWRドキュメントを参照してください。

import useSWR from 'swr'
 
const fetcher = (...args) => fetch(...args).then((res) => res.json())
 
function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)
 
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}