理解 React Server Components

什么是 React Server Components？

React Server Components（RSC）是一种全新类型的组件，专在服务端运行。它们由 React 团队推出，是 Next.js App Router 的核心组成部分。

与在浏览器中渲染的传统 React 组件不同，Server Components 在服务端执行，只有它们的输出（类似 HTML 的数据）会被发送到客户端。

为什么使用 Server Components？

1. 减少打包体积

Server Components 永远不会将其 JavaScript 发送到客户端。这意味着：

2. 直接访问数据库

Server Components 可以直接查询数据库，无需构建 API 层：

import { db } from "@/lib/db";
export default async function PostList() {
  const posts = await db.post.findMany();
  return posts.map((p) => );
}

3. 自动代码分割

Next.js 会自动对应用进行代码分割。只有需要交互的组件才会被发送到客户端。

服务端组件与客户端组件

Next.js 提供了服务端和客户端组件之间的明确界限：

"use client";
import { useState } from "react";
export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return  setLikes((l) => l + 1)}>点赞数：{likes};
}

最佳实践