客户端渲染(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('获取数据时发生错误:', e)
})
}, [])
return <p>{data ? `你的数据:${data}` : '加载中...'}</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>加载失败。</p>
if (isLoading) return <p>加载中...</p>
return <p>你的数据:{data}</p>
}
值得注意的是:
请记住,CSR 可能会影响 SEO。一些搜索引擎爬虫可能不会执行 JavaScript,因此只能看到应用程序的初始空状态或加载状态。对于网络连接较慢或设备性能较低的用户,它还可能导致性能问题,因为他们需要等待所有 JavaScript 加载和运行才能看到完整页面。Next.js 推荐一种混合方法,允许你根据应用程序中每个页面的需求使用服务器端渲染、静态站点生成和客户端渲染的组合。在应用路由器中,你还可以使用使用 Suspense 的加载 UI 在页面渲染时显示加载指示器。