Next.js 15 Client-Server Components 边界与数据流治理实践

核心价值明确何时使用 Server/Client 组件，降低不必要的客户端包与状态复杂度。使用 Server Actions 直接在服务端处理表单/事件，客户端仅承担交互与呈现。结构示例// app/items/page.tsx (Server Component) export default async function Page() { const items = await fetch('https://api.example.com/items', { next: { revalidate: 300, tags: ['items'] } }).then(r => r.json()) return <List items={items} /> } // app/items/List.tsx (Client Component) 'use client' export default function List({ items }: { items: any[] }) { async function likeAction(id: string) { 'use server' // Server Action：直接更新后端并触发再验证 await fetch(`https://api.example.com/items/${id}/like`, { method: 'POST', cache: 'no-store' }) // 可调用标签或路径再验证 } return ( <ul> {items.map((x) => ( <li key={x.id}> {x.name} <form action={likeAction.bind(null, x.id)}> <button>点赞</button> </form> </li> ))} </ul> ) } 治理建议数据获取优先在 Server Components；客户端组件仅处理交互与动画。对实时交互使用 Server Actions 并结合再验证；避免在客户端持久化源数据副本。结论清晰的边界与数据流治理可减少包体与状态复杂度，提升性能与一致性，是 App Router 的核心工程实践。