客戶端資料獲取

當您的頁面不需要 SEO 索引、不需要預先渲染資料，或是頁面內容需要頻繁更新時，客戶端資料獲取就非常有用。與伺服器端渲染 API 不同，您可以在元件層級使用客戶端資料獲取。

如果在頁面層級進行，資料會在運行時獲取，頁面內容會隨著資料變化而更新。如果在元件層級使用，資料會在元件掛載時獲取，元件內容會隨著資料變化而更新。

需要注意的是，使用客戶端資料獲取可能會影響應用程式的效能和頁面載入速度。這是因為資料獲取是在元件或頁面掛載時進行的，而且資料不會被快取。

使用 useEffect 進行客戶端資料獲取

以下範例展示如何使用 useEffect Hook 在客戶端獲取資料。

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>
  )
}

使用 useEffect 進行客戶端資料獲取

使用 SWR 進行客戶端資料獲取

On this page