アプリケーションの構築データフェッチングクライアントサイドフェッチング

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

クライアントサイドのデータフェッチングは、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>
  )
}

お役に立ちましたか？