用 React Server Components 构建高性能应用

什么是 Server Components？

React Server Components (RSC) 是 React 18+ 引入的新特性，允许组件在服务端渲染，减少客户端 JavaScript 体积。

核心优势

1. 零客户端体积：Server Components 的代码不会发送到客户端
2. 直接访问后端资源：可以直接访问数据库、文件系统
3. 自动代码分割：只有 Client Components 会被打包到客户端

基本用法

// app/articles/page.tsx (Server Component)
import { db } from '@/lib/db'

export default async function ArticlesPage() {
  const articles = await db.article.findMany({
    where: { status: 'published' },
    orderBy: { createdAt: 'desc' },
  })

  return (
    <div>
      {articles.map(article =&gt; (
        
      ))}
    </div>
  )
}

// ArticleCard 可以是 Client Component
'use client'
import { motion } from 'framer-motion'

export function ArticleCard({ article }) {
  return (
    
      <h2>{article.title}</h2>
      <p>{article.excerpt}</p>
    
  )
}

数据获取模式

// 并行数据获取
async function getArticle(id: string) {
  const [article, comments] = await Promise.all([
    db.article.findUnique({ where: { id } }),
    db.comment.findMany({ where: { articleId: id } }),
  ])
  return { article, comments }
}

总结

React Server Components 代表了 React 未来的发展方向，合理使用可以大幅提升应用性能。