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>
    );
}