客戶端渲染 (CSR) | Next.js 繁體中文

在使用 React 進行客戶端渲染 (CSR) 時，瀏覽器會下載一個最小化的 HTML 頁面以及該頁面所需的 JavaScript。接著使用 JavaScript 來更新 DOM 並渲染頁面。當應用程式首次載入時，使用者可能會注意到在完整頁面顯示前有輕微延遲，這是因為頁面必須在所有 JavaScript 下載、解析和執行完成後才會完全渲染。

首次載入頁面後，在相同網站中導航至其他頁面通常會更快，因為只需獲取必要的資料，且 JavaScript 可以重新渲染部分頁面而無需完整刷新。

在 Next.js 中，有兩種方式可以實現客戶端渲染：

在頁面中使用 React 的 useEffect() 鉤子，而非伺服器端渲染方法 (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) => {
      // 根據需求處理錯誤
      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 來顯示頁面渲染過程中的載入指示器。

伺服器端渲染 (Server-side Rendering)

使用伺服器端渲染 (SSR) 在每次請求時生成頁面。

靜態網站生成 (SSG)

使用靜態網站生成 (SSG) 在構建時預先渲染頁面。