クライアントサイドフェッチ
クライアントサイドデータフェッチは、ページがSEOインデックスを必要としない場合、データを事前レンダリングする必要がない場合、またはページのコンテンツを頻繁に更新する必要がある場合に便利です。サーバーサイドレンダリング (SSR) 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>
)
}