React Server Components：重新定义前端开发

React Server Components：重新定义前端开发

React Server Components是React的一项革命性特性，允许组件在服务器端运行。

什么是React Server Components

React Server Components（RSC）是一种新的组件类型，它在服务器端渲染并将结果发送到客户端。

核心优势

1. 减少客户端包体积

• 服务器组件代码不会发送到客户端
• 减少JavaScript下载量
• 提升首屏加载速度

2. 直接访问后端资源

• 在组件中直接访问数据库
• 无需API层
• 减少网络请求

3. 自动代码分割

• 自动分割服务器和客户端代码
• 按需加载客户端组件
• 优化加载性能

基本概念

服务器组件

// ServerComponent.tsx async function BlogPost({ id }) { const post = await db.posts.find(id) return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ) }

客户端组件

// ClientComponent.tsx 'use client' import { useState } from 'react' function LikeButton({ initialLikes }) { const [likes, setLikes] = useState(initialLikes) return ( <button onClick={() => setLikes(l => l + 1)}> {likes} likes </button> ) }

混合使用

// ParentComponent.tsx import BlogPost from './ServerComponent' import LikeButton from './ClientComponent' async function PostWithLikes({ id }) { const post = await db.posts.find(id) return ( <div> <BlogPost id={id} /> <LikeButton initialLikes={post.likes} /> </div> ) }

数据获取

服务器端数据获取

async function ProductList() { const products = await db.products.findAll({ limit: 10, orderBy: { createdAt: 'desc' } }) return ( <ul> {products.map(product => ( <li key={product.id}> <h3>{product.name}</h3> <p>${product.price}</p> </li> ))} </ul> ) }

客户端数据获取

'use client' import { useEffect, useState } from 'react' function SearchResults({ query }) { const [results, setResults] = useState([]) useEffect(() => { fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => setResults(data)) }, [query]) return ( <div> {results.map(result => ( <div key={result.id}>{result.title}</div> ))} </div> ) }

缓存策略

请求缓存

async function getUser(id) { const user = await cache.fetch(`user:${id}`, async () => { return db.users.find(id) }, { ttl: 3600 }) return user }

预取数据

export async function generateMetadata({ params }) { const product = await db.products.find(params.id) return { title: product.name, description: product.description } }

错误处理

错误边界

'use client' import { Component, ErrorInfo } from 'react' class ErrorBoundary extends Component { state = { hasError: false, error: null } static getDerivedStateFromError(error) { return { hasError: true, error } } componentDidCatch(error, info: ErrorInfo) { console.error('Error:', error, info) } render() { if (this.state.hasError) { return <div>Something went wrong</div> } return this.props.children } }

迁移策略

渐进式迁移

1. 识别可转为服务器组件的组件
2. 添加'use server'或'use client'指令
3. 测试功能是否正常

注意事项

• 服务器组件不能使用React hooks
• 避免在服务器组件中使用浏览器API
• 注意数据获取的缓存策略

性能优化

选择合适的组件类型

• 纯展示组件：服务器组件
• 需要交互的组件：客户端组件
• 混合场景：两者结合

数据预取

export async function generateStaticParams() { const posts = await db.posts.findAll() return posts.map(post => ({ id: post.id.toString() })) }

总结

React Server Components为前端开发带来了新的可能性。通过将部分组件移到服务器端，可以显著提升应用性能。

技术有温度，RSC让前端开发更加高效和智能。