React Server Components：重新定义服务端渲染
React Server Components：重新定义服务端渲染
前言
各位前端小伙伴，不知道你们有没有遇到过这种情况：页面加载时需要等待大量JavaScript下载和执行，导致首屏渲染缓慢！
我曾经开发过一个内容网站，首屏加载时间超过5秒。后来我引入了React Server Components，首屏加载时间降到了1秒以内！
什么是Server Components？
React Server Components（RSC）是React团队推出的一种新的组件类型，它允许组件在服务器端运行，只将渲染结果发送到客户端，从而减少客户端JavaScript体积，提升首屏加载性能。
Server Components工作原理
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 服务器端 │ │ 网络 │ │ 客户端 │ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ │ │ │ │ 1. 渲染Server Component│ │ │───────────────────────>│ │ │ │ │ │ │ 2. 发送渲染结果(JSON)│ │ │────────────────────────>│ │ │ │ │ │ │ 3. 客户端渲染 │ │ │ │<─────────────│创建Server Components
基本结构
// ServerComponent.js async function ServerComponent() { const data = await fetchData() return ( <div> {data.map((item) => ( <Item key={item.id} item={item} /> ))} </div> ) } export default ServerComponent客户端组件引用
// ClientComponent.js 'use client' import { useState } from 'react' function ClientComponent({ initialValue }) { const [count, setCount] = useState(initialValue) return ( <div> <div>Count: {count}</div> <button onClick={() => setCount(c => c + 1)}>Increment</button> </div> ) } export default ClientComponentServer Components vs Client Components
| 特性 | Server Components | Client Components |
|---|---|---|
| 运行位置 | 服务器端 | 客户端 |
| 状态管理 | 不支持useState/useEffect | 支持所有hooks |
| 数据获取 | 可以直接调用数据库 | 需要通过API获取 |
| 文件大小 | 不发送到客户端 | 发送到客户端 |
| 交互性 | 无 | 有 |
在Next.js中使用Server Components
页面组件
// app/page.js async function HomePage() { const posts = await fetchPosts() return ( <div> <h1>Welcome to my blog</h1> <PostList posts={posts} /> </div> ) } export default HomePage布局组件
// app/layout.js async function RootLayout({ children }) { const user = await getUser() return ( <html> <head> <title>My App</title> </head> <body> <Header user={user} /> {children} </body> </html> ) } export default RootLayoutServer Components实战
数据获取
// app/posts/page.js async function PostsPage() { const posts = await fetch('https://api.example.com/posts').then(res => res.json()) return ( <div> <h1>Posts</h1> <ul> {posts.map((post) => ( <li key={post.id}> <h2>{post.title}</h2> <p>{post.excerpt}</p> </li> ))} </ul> </div> ) } export default PostsPage嵌套使用
// app/blog/page.js async function BlogPage() { const posts = await getPosts() return ( <div> <h1>Blog</h1> <PostList posts={posts} /> </div> ) } async function PostList({ posts }) { return ( <div> {posts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </div> ) } async function PostCard({ post }) { const author = await getAuthor(post.authorId) return ( <div> <h3>{post.title}</h3> <p>By {author.name}</p> </div> ) }混合使用Server和Client Components
在Server Component中使用Client Component
// app/page.js import ClientCounter from './ClientCounter' async function HomePage() { const initialCount = await getInitialCount() return ( <div> <h1>Home</h1> <ClientCounter initialCount={initialCount} /> </div> ) } export default HomePage // app/ClientCounter.js 'use client' import { useState } from 'react' function ClientCounter({ initialCount }) { const [count, setCount] = useState(initialCount) return ( <div> <div>Count: {count}</div> <button onClick={() => setCount(c => c + 1)}>Increment</button> </div> ) } export default ClientCounter在Client Component中使用Server Component
// app/ClientWrapper.js 'use client' import { useState } from 'react' import ServerContent from './ServerContent' function ClientWrapper() { const [isLoaded, setIsLoaded] = useState(false) return ( <div> {isLoaded ? ( <ServerContent /> ) : ( <div>Loading...</div> )} <button onClick={() => setIsLoaded(true)}>Load Content</button> </div> ) } export default ClientWrapperServer Components最佳实践
1. 将数据获取逻辑放在Server Components中
async function ProductList() { const products = await fetchProducts() return ( <div> {products.map((product) => ( <ProductCard key={product.id} product={product} /> ))} </div> ) }2. 将交互逻辑放在Client Components中
'use client' function ProductCard({ product }) { const [isFavorite, setIsFavorite] = useState(false) return ( <div> <h3>{product.name}</h3> <button onClick={() => setIsFavorite(!isFavorite)}> {isFavorite ? '❤️' : '🤍'} </button> </div> ) }3. 合理划分组件边界
// Server Component - 数据获取 async function BlogPost({ id }) { const post = await getPost(id) return ( <article> <h1>{post.title}</h1> <ContentRenderer content={post.content} /> <CommentSection postId={id} /> </article> ) } // Client Component - 交互 'use client' function CommentSection({ postId }) { const [comments, setComments] = useState([]) useEffect(() => { fetchComments(postId).then(setComments) }, [postId]) return ( <div> {comments.map((comment) => ( <Comment key={comment.id} comment={comment} /> ))} </div> ) }常见问题
问题1：Server Component中无法使用hooks
解决方案：将需要hooks的逻辑移到Client Component中
问题2：Client Component无法直接获取数据
解决方案：通过props从Server Component传递数据
问题3：缓存问题
解决方案：使用revalidate属性控制缓存策略
export const revalidate = 60 // 60秒重新验证Server Components的优势
- 减少JavaScript体积：Server Components不发送到客户端
- 提升首屏加载：服务端渲染，更快的首屏展示
- 简化数据获取：直接在组件中获取数据
- 更好的SEO：完整的HTML输出
总结
React Server Components是React生态的重要革新。通过使用Server Components，我们可以：
- 优化性能：减少客户端JavaScript体积
- 提升体验：更快的首屏加载
- 简化开发：直接在组件中获取数据
- 改进SEO：完整的服务端渲染
现在，开始使用Server Components构建更高效的应用吧！你的用户会感谢你的！
最后一句忠告：不要将所有组件都改为Server Components，根据需求合理选择！