← 返回缓存测试

Router Cache（客户端路由缓存）- 可观测测试

📚 Router Cache 核心行为（Next.js 15+）

✅ 三个关键点：

  • Pages 默认不缓存（staleTime = 0）

    使用 Link 或 router.push() 导航时，会重新请求 RSC Payload（新的 _rsc 请求）

  • 浏览器前进/后退时会重用 RSC

    使用浏览器后退/前进按钮时，不会重新请求 RSC，使用已有的 RSC Payload

  • Prefetch 缓存时间：5 分钟

    Link 组件的 prefetch 会缓存 5 分钟（如果在 5 分钟内导航，使用 prefetch 的结果）

💡 理解 "not cached but reused"：

这个看似矛盾的说法指的是：Link 导航时不缓存（每次重新请求），但浏览器前进/后退时会重用（不重新请求）。 这样既保证了数据新鲜度，又优化了浏览器导航体验。

🖥️ 服务端组件渲染信息

服务端渲染时间：2025-12-17T09:54:09.478Z

💡 这个时间戳在服务端生成。如果 RSC Payload 被重用，这个时间不会变化。

💻 客户端组件状态追踪

客户端挂载时间：加载中...

挂载次数（此次会话）：0

状态更新次数：0

💡 观察重点：

  • 挂载时间：每次组件挂载都会更新
  • 挂载次数：每次组件重新挂载都会增加
  • 状态更新次数：只有点击下面的按钮才会增加（不会因为导航而重置）

⚠️ 注意：即使浏览器后退，客户端组件也可能重新挂载。 这是因为 Router Cache 的 staleTime = 0，组件不会自动保留状态。

🧪 测试导航

使用 Link 导航到 Page A

⚠️ 预期：会发起新的 _rsc 请求，服务端时间会变化

📋 测试步骤（请严格按照步骤操作）

🔬 测试 1：验证 Link 导航会重新请求 RSC

  1. 打开浏览器开发者工具的 Network 面板

    过滤：输入 "_rsc" 来只看 RSC 请求

  2. 记录当前的服务端渲染时间

    记录上面绿色框中的时间

  3. 点击 "使用 Link 导航到 Page A" 按钮

    观察 Network 面板

  4. 在 Page A 中，点击 "使用 Link 返回" 按钮

    观察 Network 面板

  5. ✅ 预期结果：
    • • Network 面板中出现新的 router-cache?_rsc=xxx 请求
    • • 服务端渲染时间会变化（因为重新渲染了 RSC）
    • • 客户端组件会重新挂载（访问次数增加）

🔬 测试 2：验证浏览器后退会重用 RSC

  1. 清空 Network 面板

    点击 🚫 图标清空请求列表

  2. 记录当前的服务端渲染时间
  3. 点击 "使用 Link 导航到 Page A" 按钮
  4. 使用浏览器后退按钮返回

    ⚠️ 重要：不要点击 Page A 中的 Link，而是点击浏览器的后退按钮 ←

  5. ✅ 预期结果：
    • • Network 面板中没有新的 _rsc 请求
    • • 服务端渲染时间保持不变（重用了 RSC Payload）
    • • 客户端组件可能会重新挂载（这是 React 的行为）

🔬 测试 3：验证 Prefetch 缓存（5 分钟）

  1. 清空 Network 面板并刷新此页面
  2. 观察 Network 面板

    Link 组件会自动 prefetch，你会看到 page-a?_rsc=xxx 请求

  3. 在 5 分钟内点击 "导航到 Page A"
  4. ✅ 预期结果：
    • • 导航时不会发起新的 _rsc 请求（使用 prefetch 的结果）
    • • 导航非常快速（instant navigation）

👀 Network 面板观察指南

🔍 如何观察 RSC 请求：

  1. 打开开发者工具（F12 或 Cmd+Option+I）
  2. 切换到 Network 标签
  3. 在过滤框中输入 "_rsc"
  4. 观察请求的 URL、时间戳参数

📊 请求格式：

/cache-test/router-cache?_rsc=随机字符串

每次新请求都会有不同的 _rsc 参数值

⚡ 关键观察点：

  • Link 导航返回：会看到新的 _rsc 请求
  • 浏览器后退：不会看到 _rsc 请求（重用）
  • 5 分钟内导航：不会看到 _rsc 请求（prefetch 缓存）

🖥️ 终端日志观察

查看运行 Next.js 的终端，观察服务端渲染日志：

[SERVER PAGE] ========== Router Cache 页面渲染 ==========
[SERVER PAGE] 渲染时间: 2025-12-17T10:30:45.123Z
[SERVER COMPONENT] 渲染时间: 2025-12-17T10:30:45.125Z

Link 导航返回：会看到新的日志（重新渲染）

浏览器后退：不会看到新的日志（重用 RSC）