クライアントサイドフェッチ

クライアントサイドでのデータフェッチは、ページに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の開発チームは、SWRと呼ばれるデータフェッチ用のReactフックライブラリを作成しました。クライアント側でデータをフェッチする場合は、強く推奨されます。キャッシュ、再検証、フォーカストラッキング、インターバルでの再フェッチなどを処理します。

上記の例と同じように、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>
  )
}