客户端渲染 (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 的加载界面来显示页面渲染期间的加载指示器。

服务端渲染 (Server-side Rendering)

静态站点生成 (SSG)

ISR

加载界面与流式传输