客戶端資料擷取

當您的頁面不需要 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 的開發團隊創建了一個用於數據獲取的 React hook 函式庫，稱為 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>
  )
}