← 返回缓存测试

Full Route Cache（全路由缓存）测试

🗺️ 什么是 Full Route Cache？

Full Route Cache 是 Next.js 在构建时自动渲染并缓存整个路由的机制。 这是一种优化，允许服务器为每个请求提供缓存的路由，而不是在服务器上重新渲染。

官方说明：

"Next.js automatically renders and caches routes at build time. This is an optimization that allows you to serve the cached route instead of rendering on the server for every request, resulting in faster page loads."

📅 当前页面渲染时间

2025-12-17T09:54:09.435Z

🧪 测试方法：

  1. 开发环境（pnpm dev）：
    每次刷新页面，这个时间都会变化（因为开发环境每次都重新渲染）
  2. 生产环境（pnpm build && pnpm start）：
    刷新页面，这个时间保持不变（使用了 Full Route Cache）
    这个时间就是构建时的时间（运行 pnpm build 的时间）
  3. 重启服务器：
    即使停止并重新运行 pnpm start，这个时间仍然不变（缓存持久化）

🔍 静态路由 vs 动态路由

✅ 静态路由（当前页面）

在构建时预渲染并缓存，运行时直接返回缓存的 HTML

export default function Page() {

// 没有 dynamic functions

return <div>Static</div>

}

构建输出： ○ (Static)

🔄 动态路由

每次请求时在服务器上渲染，不使用 Full Route Cache

export default function Page() {

// 使用了 dynamic functions

const headers = headers();

return <div>Dynamic</div>

}

构建输出： λ (Dynamic)

查看动态路由示例 →

⚠️ 什么会让路由变成动态的？

使用以下任何一个功能会让路由变成动态渲染（不使用 Full Route Cache）：

cookies()

读取 cookies

headers()

读取请求头

searchParams

使用 URL 查询参数

fetch(..., { cache: 'no-store' })

禁用数据缓存

export const dynamic = 'force-dynamic'

强制动态渲染

export const revalidate = 0

禁用缓存

🧪 如何验证 Full Route Cache？

方法 1：查看构建输出

$ pnpm build

Route (app) Size First Load JS

○ /cache-test/full-route-cache ← 静态

λ /cache-test/full-route-cache/dynamic ← 动态

○ = Static（静态，使用 Full Route Cache）
λ = Dynamic（动态，不使用 Full Route Cache）

方法 2：查看 .next 目录

.next/server/app/cache-test/full-route-cache/

page.html ← 预渲染的 HTML 文件

page_client-reference-manifest.js

静态页面会生成 .html 文件，动态页面只有 .js 文件

方法 3：对比时间戳

开发环境：

pnpm dev → 刷新页面 → 时间变化 ❌

生产环境：

pnpm build && pnpm start → 刷新页面 → 时间不变 ✅

🚀 Full Route Cache 的性能优势