Server Components 基础

React Server Components 代表了前端架构的重大转变。它允许组件在服务器端渲染，减少客户端 JavaScript 包的大小，提升首屏加载性能。

核心概念

Server Components 不会被打包到客户端代码中，这意味着它们可以直接访问后端资源，如数据库、文件系统等，而无需通过 API 层。

性能优势

通过将数据获取逻辑移到服务端，我们可以显著减少客户端的 JavaScript 负载，同时提供更快的首屏渲染速度。

实战应用

在 Next.js 13 中，所有组件默认都是 Server Components。你只需要在需要客户端交互的组件顶部添加 'use client' 指令。

数据获取模式

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

客户端组件集成

'use client'
import { useState } from 'react'

export function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

最佳实践

1. 尽可能使用 Server Components 来减少客户端包大小
2. 只在需要交互性时使用 Client Components
3. 将数据获取逻辑放在最接近使用数据的地方
4. 利用 Streaming 和 Suspense 实现渐进式渲染