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 应纳入相关状态快照或直接禁用缓存

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！