客户端渲染 (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) => {
// 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 在客户端获取数据的最小示例
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 路由器中，您还可以使用 使用 Suspense 加载 UI 在页面渲染时显示加载指示器。
后续步骤
了解 Next.js 中的其他渲染方法。
这有帮助吗？