Nuxt 3 Hybrid Rendering（routeRules 混合渲染）与 Nitro 边缘缓存（SWR / ISR）底层架构如何工作？
Nuxt 3 最核心的架构竞争力在于由 Nitro 服务端引擎驱动的 Hybrid Rendering（混合渲染） 与 内置跨平台缓存层（Storage Layer），允许按路由规则甚至按单个服务端接口精确控制缓存生命周期。
一、 routeRules 混合渲染策略矩阵
在 nuxt.config.ts 中配置的 routeRules 会在构建期被 Nitro 编译为路由匹配表（基于 radix3 基数树高速路由匹配）以及对应的云平台（Cloudflare Pages / Vercel / Nginx）原生配置文件：
routeRules 配置项 |
底层渲染与缓存行为 | 典型应用场景 |
|---|---|---|
{ prerender: true } |
构建期由 Nitro 爬虫预先静态渲染为 HTML 文件（SSG） | 营销落地页、关于我们、帮助文档 |
{ swr: 600 } |
开启 Stale-While-Revalidate：600 秒内直接返回 Nitro 缓存 HTML；过期后先秒回旧缓存，后台异步重新渲染更新缓存 | 课程详情页、题库列表页、高频访问门户 |
{ isr: 3600 } |
对齐平台原生 增量静态再生（CDN Edge ISR），缓存持久化在边缘网络 | 电商商品库、新闻资讯页 |
{ ssr: false } |
仅输出 SPA 空壳 HTML，完全交由浏览器客户端渲染（CSR） | 强交互用户仪表盘、后台管理中心 |
二、 Nitro 服务端函数级缓存：defineCachedEventHandler 与 defineCachedFunction
除了整页 HTML 缓存外，Nitro 还支持对服务端 API 或昂贵的数据库聚合函数做细粒度 SWR 缓存，并可无缝切换内存、Redis 或 Cloudflare KV 存储驱动：
// server/api/leaderboard.get.ts：使用 defineCachedEventHandler 实现高并发接口级 SWR 缓存
export default defineCachedEventHandler(
async (event) => {
const query = getQuery(event)
// 昂贵的数据库排行榜聚合查询（仅在缓存未命中或后台静默刷新时执行）
const list = await queryTopUsersFromDb(String(query.category || 'all'))
return { updatedAt: new Date().toISOString(), list }
},
{
maxAge: 60 * 5, // 5 分钟缓存有效期
staleMaxAge: 60 * 60 * 24, // 允许在后台重算期间继续返回最多 24 小时内的旧数据（绝不阻塞用户请求！）
swr: true, // 开启 Stale-While-Revalidate
name: 'leaderboard-cache',
getKey: (event) => {
const q = getQuery(event)
return `cat-${q.category || 'all'}` // 自定义缓存键生成规则
}
}
)