Next.jsAppRouter与ReactServerComponents最佳实践概述Next.js的`app/`目录与React Server Components结合，提供了更自然的同构与数据获取方式。通过明确的渲染边界与缓存策略，应用可在性能与开发体验上取得平衡。技术背景App Router以文件系统路由为基础，支持并行与交错路由、渐进式渲染以及灵活的ISR。RSC在服务端渲染组件树并仅将必要的payload发送到客户端，降低JS体积与水合成本。核心内容基础结构与数据获取// app/users/[id]/page.tsx (Server Component)
export const revalidate = 60
async function getUser(id: string) {
const res = await fetch(`https://api.example.com/users/${id}`, { next: { revalidate: 60 } })
if (!res.ok) throw new Error('Failed to fetch')
return res.json()
}
export default async function Page({ params }: { params: { id: string } }) {
const user = await getUser(params.id)
return (
<article>
<h1>{user.name}</h1>
<p>{user.bio}</p>
</article>
)
}
路由并行与插槽// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh-CN">
<body>{children}</body>
</html>
)
}
// app/@marketing/page.tsx 与 app/@dashboard/page.tsx 并行路由
客户端组件与交互"use client"
import { useState } from 'react'
export default function LikeButton() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(c => c + 1)}>点赞 {count}</button>
}
动态与静态策略使用`revalidate`控制ISR更新频率。通过`generateStaticParams`为动态路由批量静态化。对需要实时数据的页面设置`export const dynamic = 'force-dynamic'`。// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const res = await fetch('https://api.example.com/blog/list')
const list = await res.json()
return list.map((i: { slug: string }) => ({ slug: i.slug }))
}
性能优化要点利用RSC降低客户端JS体积与水合成本。使用`next/cache`与`fetch`缓存结合`revalidate`实现细粒度数据缓存。对大组件树采用路由并行与分段渲染，提升首屏可用性。技术参数与验证操作系统: Windows 11 / macOS 14 / Ubuntu 22.04Node.js: 20.x LTSNext.js: 14.x+React: 19.x浏览器: Chrome 120+ / Firefox 121+ / Safari 17+验证要点: 通过`revalidate`与`generateStaticParams`实现稳定的ISR；在服务端组件中进行数据获取与渲染，在客户端组件中处理交互，确保渲染边界清晰且无不必要的水合。应用场景企业内容站点与文档门户电商商品列表与详情页的混合渲染需要并行布局与渐进渲染的复杂路由最佳实践清单数据获取置于Server Components，交互逻辑置于Client Components明确缓存策略并标注`revalidate`与动态策略利用并行路由减少关键路径阻塞注意事项客户端组件不得直接访问服务器端资源保持`fetch`错误处理，避免RSC链路中断静态化与动态化策略需与业务一致参考资料
发表评论 取消回复