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

クライアントサイドでのデータ取得は、以下のような場合に有用です：

ページが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 Hookライブラリ「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>
  )
}

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

useEffectを使ったクライアントサイドデータ取得

SWRを使ったクライアントサイドデータ取得

On this page