客戶端渲染 (CSR)

在使用 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)

靜態網站生成 (SSG)

ISR

載入 UI 與串流