客戶端資料獲取

當你的頁面不需要 SEO 索引、不需要預渲染資料，或者頁面內容需要頻繁更新時，客戶端資料獲取很有用。與伺服器端渲染 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 文件。

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