跳到内容
构建你的应用程序渲染客户端渲染 (CSR)

客户端渲染 (CSR)

在使用 React 进行客户端渲染 (CSR) 时,浏览器会下载最简化的 HTML 页面以及页面所需的 JavaScript。然后使用 JavaScript 来更新 DOM 并渲染页面。当应用程序首次加载时,用户可能会注意到在看到完整页面之前有轻微的延迟,这是因为页面在下载、解析和执行所有 JavaScript 之前不会完全渲染。

首次加载页面后,导航到同一网站上的其他页面通常会更快,因为只需要获取必要的数据,并且 JavaScript 可以重新渲染页面的部分内容,而无需完全刷新页面。

在 Next.js 中,有两种方法可以实现客户端渲染:

  1. 在页面中使用 React 的 useEffect() 钩子,而不是服务器端渲染方法(getStaticPropsgetServerSideProps)。
  2. 使用诸如 SWRTanStack 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 在页面渲染时显示加载指示器。