面试题：React Server Components中自定义Hooks的深度剖析

Question

假设你正在开发一个复杂的React Server Components应用，需要创建一个自定义Hooks来处理服务器端数据的缓存与复用。请详细描述这个自定义Hooks的设计思路、实现步骤，以及在服务器和客户端之间如何保持数据一致性？

Answer 1

设计思路

1. 目的明确：此自定义Hook旨在缓存服务器端数据，减少重复请求，提升性能。
2. 缓存策略：采用合适的数据结构（如Map）存储缓存数据，以键值对形式，键为请求标识（如URL、查询参数等组合），值为缓存数据及相关元信息（如缓存时间）。
3. 复用逻辑：每次请求数据前先检查缓存，若数据有效则直接返回缓存数据，否则发起新请求并更新缓存。

实现步骤

1. 创建Hook：

   import { useState, useEffect } from'react';
   
   const useServerDataCache = (fetchFunction, cacheKey, cacheDuration = 60 * 1000) => {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const cache = {};
   
     useEffect(() => {
       const cached = cache[cacheKey];
       if (cached && Date.now() - cached.timestamp < cacheDuration) {
         setData(cached.data);
         setLoading(false);
       } else {
         const fetchData = async () => {
           try {
             const result = await fetchFunction();
             cache[cacheKey] = { data: result, timestamp: Date.now() };
             setData(result);
             setLoading(false);
           } catch (e) {
             setError(e);
             setLoading(false);
           }
         };
         fetchData();
       }
     }, [fetchFunction, cacheKey, cacheDuration]);
   
     return { data, loading, error };
   };
   
   export default useServerDataCache;
   

2. 解释代码：
   • useState 分别用于存储数据 data、加载状态 loading 和错误信息 error。
   • cache 对象用于存储缓存数据。
   • useEffect 钩子在组件挂载和依赖项变化时触发。首先检查缓存中是否有有效数据，若有则直接设置数据并更新加载状态；否则发起异步请求，成功后更新缓存和数据，失败则设置错误。

保持数据一致性

1. 服务器端：
   • 在服务器渲染（SSR）过程中，每个请求都有独立的缓存空间，防止不同用户数据混淆。
   • 定期清理缓存，例如通过设置定时任务删除过期缓存数据，确保缓存数据的时效性。
2. 客户端：
   • 在客户端重新渲染时，先依赖服务器端渲染的数据，这保证了初始数据的一致性。
   • 若客户端检测到缓存过期（如网络请求回来的数据与缓存数据不一致且缓存已过期），则重新发起请求更新数据。
3. 通用措施：
   • 在数据请求时携带版本信息，若服务器端数据版本更新，则客户端强制重新获取数据，确保数据的一致性。
   • 采用乐观更新策略，即客户端在发起请求后先更新本地缓存和UI，等服务器确认后再最终确定数据更新，这样能提升用户体验同时保证数据一致性。