構建您的應用渲染客戶端渲染 (CSR)

客戶端渲染 (CSR)

在 React 的客戶端渲染 (CSR) 中，瀏覽器下載一個最小的 HTML 頁面和該頁面所需的 JavaScript。然後，JavaScript 被用於更新 DOM 並渲染頁面。當應用首次載入時，使用者可能會在看到完整頁面之前注意到輕微的延遲，這是因為直到所有 JavaScript 被下載、解析和執行後，頁面才完全渲染。

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

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

在頁面中使用 React 的 useEffect() 鉤子，而不是伺服器端渲染方法（getStaticProps 和 getServerSideProps）。
使用資料獲取庫（如 SWR 或 TanStack Query）在客戶端獲取資料（推薦）。

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

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 在客戶端獲取資料的最小示例：

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 來在頁面渲染時顯示載入指示器。

下一步

瞭解 Next.js 中的其他渲染方法。

客戶端渲染 (CSR)

下一步

伺服器端渲染 (SSR)

靜態站點生成 (SSG)

ISR