当前位置：首页 > article >正文

Next.js【详解】服务端组件 vs 客户端组件

article 2025/2/19 14:43:08

Next.js 13 + 新增了服务端组件和客户端组件

服务端组件【默认】

服务器端渲染的 React 组件：在服务器上生成 HTML 并发送到客户端

优点

性能优化：由于在服务器端处理数据获取和渲染逻辑，减少了客户端的负担，加快了页面加载速度。
数据安全：可以直接访问服务器端资源，如数据库等，敏感数据无需暴露给客户端。

缺点

无交互状态：没有状态和生命周期方法，不适合处理用户交互。

适用场景

数据获取：适合在服务器端进行数据获取，如从数据库、API 等获取数据，避免客户端请求带来的延迟。
静态内容展示：用于展示不需要交互的静态内容，如文章列表、产品信息等。

客户端组件

传统的 React 组件，会将 JavaScript 代码发送到客户端，在浏览器中进行渲染和交互。

优点

交互性强：可以使用 React 的状态管理、事件处理等功能，实现丰富的用户交互。

缺点

依赖浏览器环境，处理用户输入、响应事件等。
敏感数据会暴露给客户端。
需要向客户端发送 JavaScript 代码，会增加客户端下载和执行的代码量。

适用场景

交互功能：实现需要用户交互的功能，如表单提交、按钮点击、下拉菜单等。
状态管理：当组件需要维护自己的状态时，使用客户端组件，如计数器、购物车等。

语法

在文件顶部添加 “use client”

// 客户端组件示例
"use client";

import React, { useState } from 'react';

export default function ClientComponent() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>点击次数: {count}</p>
            <button onClick={() => setCount(count + 1)}>点击</button>
        </div>
    );
}

组件嵌套

服务器组件可以嵌套客户端组件，但客户端组件不能嵌套服务器组件。

// 服务器组件嵌套客户端组件
export default function ParentServerComponent() {
    return (
        <div>
            <h1>父服务器组件</h1>
            <ClientComponent />
        </div>
    );
}