クライアントサイドフェッチ
クライアントサイドでのデータ取得は、以下の場合に有用です：
- ページが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の使用方法の詳細については、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>
)
}