客戶端渲染 (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>
}

在上面的例子中，組件一開始會渲染「載入中...」。然後，一旦數據擷取完成，它就會重新渲染並顯示數據。

雖然在 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)

載入 UI 和串流