编辑“︁Next.js服务器组件”︁

= Next.js服务器组件 =

== 介绍 ==
'''Next.js服务器组件'''（Server Components）是Next.js框架中的一种渲染策略，允许开发者在服务器端渲染React组件，而无需将组件代码发送到客户端。这种机制提高了性能，减少了客户端JavaScript包的大小，并允许直接访问服务器端资源（如数据库、文件系统等）。

服务器组件是Next.js 13及更高版本引入的重要特性，与传统的客户端组件（Client Components）形成对比。服务器组件在构建时或请求时在服务器上渲染，生成的HTML被发送到客户端，而交互性则由客户端组件补充。

== 核心特点 ==
* '''零客户端捆绑'''：服务器组件的代码不会包含在客户端JavaScript包中。
* '''直接服务器资源访问'''：可以直接访问后端API、数据库等。
* '''自动代码分割'''：按需加载，减少初始页面加载时间。
* '''流式渲染'''：支持逐步渲染HTML，提升用户体验。

== 与客户端组件的区别 ==
{| class="wikitable"
|-
! 特性 !! 服务器组件 !! 客户端组件
|-
| 渲染位置 || 服务器 || 客户端（浏览器）
|-
| 交互性 || 无（静态） || 支持（动态）
|-
| 数据获取 || 直接访问服务器资源 || 需通过API调用
|-
| 代码发送到客户端 || 否 || 是
|}

<mermaid>
graph LR
    A[页面请求] --> B{包含服务器组件?}
    B -->|是| C[服务器渲染HTML]
    B -->|否| D[发送客户端JS]
    C --> E[客户端Hydration]
</mermaid>

== 基本用法 ==
服务器组件是Next.js中的默认组件类型。要创建一个服务器组件，只需在<code>.jsx</code>或<code>.tsx</code>文件中编写React组件：

<syntaxhighlight lang="javascript">
// app/page.js
export default function ServerComponent() {
    // 此代码仅在服务器端执行
    const data = fetchDataFromDatabase(); // 直接访问数据库
    
    return (
        <div>
            <h1>服务器组件示例</h1>
            <p>数据: {data}</p>
        </div>
    );
}
</syntaxhighlight>

客户端组件需要使用<code>'use client'</code>指令显式声明：

<syntaxhighlight lang="javascript">
'use client' // 标记为客户端组件

import { useState } from 'react';

export default function ClientComponent() {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => setCount(count + 1)}>
            点击次数: {count}
        </button>
    );
}
</syntaxhighlight>

== 数据获取 ==
服务器组件可以方便地获取数据，无需额外API端点：

<syntaxhighlight lang="javascript">
// app/blog/page.js
async function BlogPage() {
    const posts = await fetch('https://api.example.com/posts').then(res => res.json());
    
    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}
</syntaxhighlight>

== 实际应用场景 ==
'''场景1：电子商务产品页面'''
* 服务器组件：获取产品数据、渲染静态内容
* 客户端组件：添加到购物车按钮、用户评价交互

'''场景2：内容管理系统'''
* 服务器组件：获取和渲染博客内容
* 客户端组件：评论表单、点赞功能

== 性能优势 ==
服务器组件通过以下方式提升性能：
1. 减少客户端JavaScript包大小
2. 避免客户端-服务器数据获取的"瀑布流"问题
3. 自动缓存渲染结果
4. 支持渐进式流式传输

数学上，性能提升可以表示为：
<math>
\Delta T = T_{传统} - T_{服务器组件} > 0
</math>
其中<math>\Delta T</math>表示时间节省量。

== 限制与注意事项 ==
* 不能使用浏览器API（如<code>window</code>、<code>document</code>）
* 不能使用React状态（<code>useState</code>等）和生命周期方法
* 不能使用事件处理程序
* 需要客户端交互的部分应拆分为客户端组件

== 最佳实践 ==
1. 默认使用服务器组件
2. 仅在需要交互性时使用客户端组件
3. 将组件树中的交互部分"下推"到叶子节点
4. 使用组合模式整合服务器和客户端组件

== 总结 ==
Next.js服务器组件代表了现代Web开发的重要演进，通过将更多工作转移到服务器端，实现了更好的性能和开发体验。理解并合理使用服务器组件与客户端组件，是构建高效Next.js应用的关键。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]