Vue SSR服务器端缓存通过页面级微缓存（LRU+1秒过期）和组件级serverCacheKey协同优化渲染性能，需配合HTTP缓存头与严格绕过策略防污染。
Vue 项目的服务器端缓存主要针对服务端渲染（SSR）场景，核心目标是减少重复的组件实例化和虚拟 DOM 渲染开销。关键不在前端资源文件，而在 Node.js 渲染层——通过页面级和组件级缓存协同生效。
页面级微缓存（Micro-caching）
适用于内容不随用户身份变化的公开页面（如博客首页、产品介绍页）。用 LRU 内存缓存 + 极短过期时间（如 1 秒），平衡新鲜度与吞吐量：
- 在 SSR 入口（如 Express 路由）中判断请求是否可缓存：检查 URL 是否含用户标识（如 cookie、token）、是否为 GET 请求、是否排除 /api 或 /user 等动态路径
- 使用 lru-cache 实例存储完整 HTML 字符串，key 为 req.url
- 命中缓存时直接 res.end(html)；未命中则调用 renderer.renderToString，渲染完成后写入缓存
组件级缓存（serverCacheKey）
在 Vue 组件中声明 serverCacheKey 函数，让 renderer 复用已渲染的子树结果：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 组件必须定义 name（唯一字符串），否则缓存无效
-
serverCacheKey 返回值需包含所有影响输出的关键变量，例如：
props => props.id + props.locale，而非仅props.id（若 locale 变化会出错） - 渲染器初始化时传入缓存实例：
createRenderer({ cache: LRU({ max: 10000, maxAge: 30000 }) })
配合 HTTP 缓存头
即使 SSR 层做了微缓存，仍需在响应头中设置合理策略，让 CDN 或浏览器协同分担压力：
立即学习“前端免费学习笔记（深入）”；
- 对静态资源（JS/CSS/图片）启用强缓存：
Cache-Control: public, max-age=31536000, immutable - 对 SSR HTML 响应设协商缓存：
ETag（基于渲染结果哈希生成）或Last-Modified（取数据源更新时间） - Nginx 层可统一加头：
add_header Cache-Control "public, max-age=1";（与微缓存时间对齐）
避免缓存污染的要点
缓存提升性能的前提是不出错。以下情况必须绕过缓存：
- 带登录态的页面（如个人中心），isCacheable 函数需检测 Authorization header 或 session cookie
- 含表单、实时计数器、用户偏好等动态区域的页面，建议只缓存静态部分，动态块走客户端异步加载
- 组件内部依赖全局状态（如 Vuex/Pinia）且该状态可能被其他请求修改时，serverCacheKey 应纳入相关状态快照或直接禁用缓存
