Zenn
Open3

Client-side Fetching

あおけんあおけん

クライアント側のデータ取得は以下のケースで便利

  • ページがSEOインデックスを必要としない場合
  • データを事前にレンダリングする必要がない場合
  • ページのコンテンツが頻繁に更新される必要がある場合

サーバー側レンダリング API とは異なり、
クライアント側データ取得はコンポーネント レベルで使用できる。

ページレベルで行われる場合、データは実行時にフェッチされ、
データの変更に応じてページのコンテンツが更新。
コンポーネントレベルで使用される場合、
データはコンポーネントのマウント時にフェッチされ、
データの変更に応じてコンポーネントのコンテンツが更新。

クライアントサイドのデータ・フェッチを使用すると、
アプリケーションのパフォーマンスやページのロード速度に影響を与える可能性がある。
これは、データ・フェッチがコンポーネントやページのマウント時に行われ、
データがキャッシュされないためです。

あおけんあおけん

Client-side data fetching with 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>
  )
}
あおけんあおけん

Client-side data fetching with SWR

Next.jsの開発チームは、SWRというデータフェッチ用のReactフックライブラリを作成した。
クライアントサイドでデータを取得する場合は、このライブラリを使うことを強くお勧めする。
キャッシュ、再バリデーション、フォーカストラッキング、インターバルでの再フェッチなどを処理する。

上記と同じ例で、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>
  )
}