Next.js - 客户端渲染

Next.js 使用 React.js 支持客户端渲染，用于构建高度交互的用户界面。在本章中，我们将探讨什么是客户端渲染、它的优缺点，以及如何在 Next.js 中实现客户端渲染。

什么是客户端渲染？

客户端渲染是一种在 Web 应用中使用的技术，其中内容使用 JavaScript 在用户的浏览器中渲染。用户的浏览器下载一个最小的 HTML 页面和网页所需的 JavaScript，然后 JavaScript 用于更新 DOM 并渲染页面。当应用首次加载时，用户可能会注意到在看到完整页面之前有轻微延迟，这是因为页面在所有 JavaScript 下载、解析和执行完成之前不会完全渲染。

CSR 的优点

• 使用客户端渲染，我们可以创建高度交互的用户界面，因为 JavaScript 的完全控制权交给用户的浏览器。
• 由于缓存，客户端渲染在重复访问时可以提供更好的性能。
• 它减少了服务器端渲染视图的计算。

CSR 的缺点

• 客户端渲染可能会影响网页的 SEO。有些搜索引擎爬虫可能不会执行 JavaScript，因此只会看到应用的初始空状态或加载状态。
• 客户端渲染会导致网络连接较慢或设备性能较低的用户出现性能问题，因为他们需要等待所有 JavaScript 加载并运行后才能看到完整页面。

Next.js 中的客户端渲染

Next.js 提供了一种混合方法，允许你根据应用中每个页面的需求组合使用服务器端渲染、静态站点生成和客户端渲染。在 Next.js 中，如果你在页面顶部添加 'use client' 声明，该页面将成为客户端组件，并在客户端渲染。你可以在 Next.js 的客户端组件中使用 React hooks 和 functions。

客户端渲染示例

在以下示例中，我们使用了 useState 和 useEffect hooks 从外部 API 获取数据并在网页中显示。我们添加了一个加载组件，在从 API 获取数据之前它会可见。

'use client'; // 定义为 Client Component

import { useState, useEffect } from 'react';

export default function CSRPage() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://link/to/api');
                const json = await response.json();
                setData(json);
            } catch (error) {
                console.error('Error fetching data:', error); // 获取数据时出错：
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    return (
        <div>
            <h1>{loading ? 'Loading...' : 'Client-Side Rendered Page'}</h1>
            {!loading && data && (
                <ul>
                    {data.map((item) => (
                        <li key={item.id}>{item.title}</li>
                    ))}
                </ul>
            )}
        </div>
    );
}

输出

在输出中，你可以看到加载组件在 API 数据准备好显示之前会被显示。