Next.js 13/14（App Router）：动态路由服务端组件数据缓存问题

核心结论 #

不是只有「Client Component 获取数据」或「后端缓存」两种选项，你可以结合 Server Component 的优势，同时实现浏览器端的数据缓存，而且 Client Component 获取数据的方案完全可行，甚至可以和 Server Component 配合达到更好的体验。

方法1：Server Component + 客户端缓存（推荐） #

这种方案既保留 Server Component 首屏渲染、SEO友好的优势，又能实现浏览器端的本地缓存：

• 步骤1：Server Component 仍负责初始数据获取
  继续在动态路由的 Server Component 中通过 POST 请求获取数据，然后将数据传递给 Client Component 作为初始渲染值。这样首屏加载时用户能直接看到内容，不会有空白加载状态。
• 步骤2：Client Component 实现浏览器缓存逻辑
  在接收数据的 Client Component 中，利用 localStorage（持久化）或 sessionStorage（会话级）存储数据，并附带过期时间戳：

  'use client';
  
  import { useEffect, useState } from 'react';
  
  export default function UserProfile({ initialData, username }) {
    const [userData, setUserData] = useState(initialData);
  
    useEffect(() => {
      const CACHE_KEY = `user_${username}`;
      const CACHE_DURATION = 3600 * 1000; // 1小时，可自定义时长
  
      // 读取本地缓存
      const cachedData = localStorage.getItem(CACHE_KEY);
      if (cachedData) {
        const { data, timestamp } = JSON.parse(cachedData);
        // 检查缓存是否过期
        if (Date.now() - timestamp < CACHE_DURATION) {
          setUserData(data);
          return;
        }
      }
  
      // 缓存不存在或过期时，将初始数据存入缓存
      localStorage.setItem(
        CACHE_KEY,
        JSON.stringify({ data: initialData, timestamp: Date.now() })
      );
    }, [initialData, username]);
  
    return (
      // 渲染用户数据的JSX结构
      <div>{/* ... */}</div>
    );
  }
  

• 后续请求逻辑
  当用户再次进入同一个 [username] 路由时，Client Component 会先读取本地缓存，若缓存有效则直接使用，无需等待 Server Component 的数据请求，实现「立即获取」的需求。

方法2：用 SWR/React Query 简化客户端缓存 #

如果觉得手动写缓存逻辑麻烦，可以用 Next.js 推荐的客户端数据请求库 SWR 或 React Query，它们内置了缓存、过期重新请求等功能：

• Server Component 先获取初始数据，作为 SWR 的初始值传入 Client Component
• Client Component 中用 SWR 接管数据请求，配置缓存过期时间：

  'use client';
  
  import useSWR from 'swr';
  
  const fetcher = async (username) => {
    const res = await fetch('/api/user', {
      method: 'POST',
      body: JSON.stringify({ username }),
      headers: { 'Content-Type': 'application/json' },
    });
    return res.json();
  };
  
  export default function UserProfile({ initialData, username }) {
    const { data: userData } = useSWR(username, fetcher, {
      initialData,
      revalidateOnMount: false, // 挂载时不自动重新请求，优先用缓存
      refreshInterval: 3600 * 1000, // 缓存1小时后自动刷新
      dedupingInterval: 3600 * 1000, // 相同请求1小时内不重复发起
    });
  
    return <div>{/* 渲染用户数据 */}</div>;
  }
  

  这类库会自动处理本地缓存（基于内存+localStorage/sessionStorage），无需手动编写缓存逻辑，同时支持过期自动更新、请求去重等功能。

方法3：Server Component 配置服务端缓存 #

如果你的需求不仅限于单个用户的浏览器缓存，而是希望所有用户请求相同 username 时都能快速响应，可以在 Server Component 中配置 Next.js 的数据缓存策略：

• 在 fetch 请求中添加 cache 和 revalidate 选项，让 Server Component 的数据结果被缓存：

  // Server Component 代码
  export async function generateMetadata({ params }) {
    // ...
  }
  
  export default async function UserPage({ params }) {
    const res = await fetch('/api/user', {
      method: 'POST',
      body: JSON.stringify({ username: params.username }),
      headers: { 'Content-Type': 'application/json' },
      next: {
        revalidate: 3600, // 缓存1小时后失效
        tags: [`user_${params.username}`], // 可用于后续主动失效缓存
      },
    });
    const initialData = await res.json();
  
    return <UserProfile initialData={initialData} username={params.username} />;
  }
  

  这种方案是服务端全局缓存，所有用户请求同一个 username 时都会复用缓存的数据，适合数据更新频率低的场景，但不属于浏览器端缓存，若用户换设备则无法复用缓存。

关于「Client Component 获取数据是否可行」的答疑 #

完全可行，而且有两种模式：

1. 纯 Client Component 请求：直接在 Client Component 中发起 POST 请求获取数据，同时实现本地缓存。但这种模式下首屏会有加载状态，SEO 不友好（因为爬虫无法执行客户端 JS 获取数据）。
2. Server Component + Client Component 配合：就是前面推荐的方案，既保留 Server Component 的首屏渲染和SEO优势，又通过 Client Component 实现浏览器缓存，是更平衡的选择。

你之前依据文档选择 Server Component 获取数据是正确的，因为它能解决首屏性能和SEO问题，而客户端缓存可以作为补充，两者并不冲突。

内容的提问来源于stack exchange，提问作者cocoagoat