客戶端算繪 (CSR)

在使用 React 進行客戶端算繪 (CSR) 時，瀏覽器會下載最小化的 HTML 頁面和頁面所需的 JavaScript。然後使用 JavaScript 更新 DOM 並算繪頁面。當應用程式首次載入時，使用者可能會注意到在看到完整頁面之前有輕微的延遲，這是因為頁面要等到所有 JavaScript 下載、解析和執行後才會完全算繪。

在頁面首次載入後，導航到同一網站上的其他頁面通常會更快，因為只需要抓取必要的資料，並且 JavaScript 可以重新算繪頁面的部分內容，而無需完全重新整理頁面。

在 Next.js 中，您可以使用兩種方式實作客戶端算繪

在您的頁面中使用 React 的 useEffect() Hook，而不是伺服器端算繪方法 (getStaticProps 和 getServerSideProps)。
使用資料抓取函式庫，例如 SWR 或 TanStack Query 以在客戶端抓取資料（建議）。

以下是在 Next.js 頁面中使用 useEffect() 的範例

pages/index.js

import React, { useState, useEffect } from 'react'
 
export function Page() {
  const [data, setData] = useState(null)
 
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }
 
    fetchData().catch((e) => {
      // handle the error as needed
      console.error('An error occurred while fetching the data: ', e)
    })
  }, [])
 
  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

在上面的範例中，元件首先算繪 Loading...。然後，一旦抓取到資料，它會重新算繪並顯示資料。

雖然在 useEffect 中抓取資料是您可能在較舊的 React 應用程式中看到的模式，但我們建議使用資料抓取函式庫以獲得更好的效能、快取、樂觀更新等。以下是使用 SWR 在客戶端抓取資料的最小範例

pages/index.js

import useSWR from 'swr'
 
export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )
 
  if (error) return <p>Failed to load.</p>
  if (isLoading) return <p>Loading...</p>
 
  return <p>Your Data: {data}</p>
}

要知道:

請記住，CSR 可能會影響 SEO。某些搜尋引擎爬蟲可能不會執行 JavaScript，因此只會看到應用程式的初始空白或載入狀態。對於網際網路連線速度較慢或裝置效能較差的使用者來說，也可能導致效能問題，因為他們需要等待所有 JavaScript 載入並執行後才能看到完整頁面。Next.js 推廣一種混合方法，讓您可以根據應用程式中每個頁面的需求，組合使用伺服器端算繪、靜態網站產生和客戶端算繪。在 App Router 中，您也可以使用具有 Suspense 的載入 UI，在頁面算繪時顯示載入指示器。

客戶端算繪 (CSR)

下一步

伺服器端算繪 (SSR)

靜態網站產生 (SSG)

漸進式靜態重新產生 (ISR)

載入 UI 和串流