React 服务器组件与客户端边界缓存策略实践

React 服务器组件与客户端边界缓存策略实践概述React Server Components（RSC）通过在服务端渲染无副作用组件减少前端包体与水合压力；`use client` 边界承载交互。本文结合 Next.js 的数据缓存与分块渲染策略，给出一致性与性能的协同落地。关键参数/概念`use client`: 将组件声明为客户端组件，负责交互与副作用。RSC 数据获取：在 Server Component 中执行 `fetch` 并利用 `cache/no-store` 与 `next.revalidate/tags` 控制一致性。片段化渲染：配合 `Suspense` 与流式输出优化首屏与交互延迟。实践/示例// app/products/page.tsx（Server Component） export const revalidate = 120; // 列表定期再验证 async function getProducts() { const res = await fetch("https://api.example.com/products", { next: { tags: ["products:list"], revalidate: 120 }, cache: "force-cache", }); return res.json(); } import ProductFilter from "./product-filter"; export default async function ProductsPage() { const products = await getProducts(); return ( <section> <h1>商品列表</h1> <ProductFilter /> <ul> {products.map((p: any) => ( <li key={p.id}>{p.name}</li> ))} </ul> </section> ); } // app/products/product-filter.tsx（Client Component） "use client"; import { useState } from "react"; export default function ProductFilter() { const [q, setQ] = useState(""); return ( <div> <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索商品" /> </div> ); } 验证方法列表一致性：调整 `revalidate` 周期并配合 `revalidateTag("products:list")` 验证增量刷新效果。包体与水合：对比纯客户端渲染与 RSC 边界的包体大小与水合耗时。交互延迟：在有 `Suspense` 的片段化渲染下测量 INP 与可交互就绪时间。注意事项边界清晰：带副作用与浏览器 API 的组件必须置于 `use client`；数据侧与纯展示优先放置在 Server Component。缓存策略：列表走 `force-cache + revalidate`，细粒度详情走 `no-store` 保证强一致。