在客戶端取得資料

當您的頁面不需要做搜尋引擎優化、資料不需要提前做渲染，或是資料需要頻繁的更新時，在客戶端取得資料是非常方便的。與伺服器端渲染的 API 不同之處在於，您可以在元件 (component) 層級從客戶端取得資料。

在頁面 (pages) 層級取得資料的話，資料會在程式運行時就被抓取，頁面上的內容會隨著資料改變一起更新。在元件層級取得資料的話，資料會在元件 mount 的時候被抓取，元件裡的內容也會隨著資料的改變而一起被更新。

在客戶端取得資料時必須記得，這有可能會影響您應用程式的效能。因為資料是在元件或是頁面 mount 時抓取，還有這些資料是不會進行快取的。

搭配 useEffect 在客戶端取得資料

下面的範例展示了如何搭配 useEffect hook 在客戶端取得資料。

function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    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 library：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 在客戶端取得資料

相關文件