React Server Components 进阶：数据预取与缓存

在 React Server Components (RSC) 中，数据预取与缓存是优化性能的关键技术。以下从核心概念到实践进行分层解析：

一、数据预取机制

1. 服务端数据加载
   RSC 在服务端渲染时直接访问数据源，避免客户端额外请求。例如：

   async function UserProfile({ userId }) {
     const userData = await fetchUserData(userId); // 服务端直接获取
     return <div>{userData.name}</div>;
   }
   

   • 优势：减少客户端网络延迟，提升首屏加载速度
   • 关键点：所有数据操作在 async 组件中完成

2. 并行预取模式
   通过 Promise 并发请求消除串行延迟：

   export default async function Page() {
     const [userData, postsData] = await Promise.all([
       fetchUser(),
       fetchPosts() // 并行执行
     ]);
     return <Feed user={userData} posts={postsData} />;
   }
   

二、缓存策略实现

缓存通过减少重复数据请求优化性能，常用方法：

1. 内存缓存（Memory Cache）
   使用 cache 函数封装数据请求：

   const getCachedData = cache(async (key) => {
     return fetchData(key); 
   });
   
   async function Component() {
     const data = await getCachedData('unique_key'); // 相同 key 命中缓存
   }
   

2. 请求去重（Deduplication）
   自动合并相同请求：

   // 同一渲染周期内重复调用只执行一次
   const data1 = await fetchData('key'); 
   const data2 = await fetchData('key'); // 返回缓存结果
   

3. 时间有效性控制
   通过 revalidate 设置缓存过期：

   fetch('https://api.example/data', {
     next: { revalidate: 60 } // 60秒后刷新
   });
   

三、性能优化实践

1. 分层数据加载
   关键数据优先加载，次要内容流式传输：

   <Suspense fallback={<Spinner />}>
     <CriticalData /> {/* 立即显示 */}
     <SecondaryData /> {/* 流式加载 */}
   </Suspense>
   

2. 缓存命中率公式
   优化效果可通过缓存命中率衡量：
   $$ \text{命中率} = \frac{\text{缓存响应数}}{\text{总请求数}} \times 100% $$
   目标值应 > 90%

3. 工具链支持

   • Next.js：unstable_cache API
   • React：cache 实验性函数

四、注意事项

1. 缓存失效场景

   • 数据更新后需手动清除缓存
   • 动态参数（如 userId）需作为缓存 key 的一部分

2. 内存管理
   长期缓存需监控内存使用，避免泄漏

3. 开发环境行为差异
   本地开发时默认禁用缓存，需显式配置

最佳实践：结合预取与分层缓存，优先保证核心路径性能。例如电商页面预取商品数据，缓存用户信息，异步加载评论模块。