アプリケーションの構築データ取得クライアントサイドでの取得

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

クライアントサイドでのデータ取得は、ページが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 Hookライブラリを作成しました。クライアントサイドでデータを取得する場合、強く推奨されます。キャッシュ、再検証、フォーカス追跡、間隔での再取得などを処理します。

上記と同じ例を使用して、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>
  )
}