<template>标签在SSR缓存中完全不生效，因其仅被服务端原样输出为普通字符串，不参与服务端解析、变量注入或DOM构建，须改用服务端layout/slot、模板include或构建时预处理实现缓存友好复用。
<template> 标签在服务端渲染（SSR）缓存中**完全不生效**——它根本不会出现在 SSR 输出的 HTML 中，也就谈不上被缓存或复用。
为什么 SSR 缓存里找不到 <template> 的内容
浏览器解析 <template> 是客户端行为；服务端（如 Node.js、Django、Flask）拿到的是原始 HTML 字符串，<template> 只是普通标签文本，不会被特殊处理。主流 SSR 框架（Next.js、Nuxt、SvelteKit）默认也不会解析或提取它。
- Node.js 的
renderToString()或renderToNodeStream()不识别<template>，直接原样输出其标签和内容 - 服务端模板引擎（Jinja2、EJS）把
<template>当作普通 HTML 字符串，既不执行也不剥离 - CDN 或反向代理（如 Varnish、Cloudflare）缓存的只是最终响应体，里面若含
<template id="nav">...，那缓存的就是这段静态字符串，不是“可复用逻辑”
<template> 和 SSR 缓存冲突的典型表现
你可能遇到这些现象，本质都是混淆了客户端模板与服务端产出：
- SSR 页面首屏渲染后，导航栏为空 —— 因为
<template id="nav">被服务端原样输出，但 JS 还没加载或执行，cloneNode(true)没触发 - 缓存页面里
<template>内容被当成“真实 DOM”参与 SEO 提取 —— 实际上搜索引擎不会执行 JS，也不会从<template>里提取语义，这部分内容对 SEO 零贡献 - 同一份缓存 HTML 在多个路由下复用，但
<template>里的占位符（如{{title}}）没被替换 —— 因为服务端根本没做变量注入，全靠客户端 JS 后续操作，而缓存页已脱离上下文
真正能在 SSR 缓存中复用的替代方案
想让片段在 SSR 缓存中稳定复用，必须让内容**在服务端就完成拼装**，而不是留到客户端克隆：
立即学习“前端免费学习笔记（深入）”；
- 使用框架内置 layout / slot 机制：Astro 的
<slot>、Next.js App Router 的layout.tsx、SvelteKit 的+layout.svelte，这些都会在 SSR 阶段生成完整 HTML - 服务端模板 include：Jinja2 的
{% include "header.html" %}、EJS 的<% include("footer.ejs") %>，路径和上下文由服务端解析，输出即完整 - 构建时预处理：用
posthtml-include或html-include插件，在构建阶段把<include src="nav.html">替换为实际内容，生成纯静态 HTML，天然适配任何缓存层 - 避免混用：不要在 SSR 模板里写
<template id="card"><div>{{name}}</div></template>，再指望客户端 JS 去填充——这等于把服务端该干的活甩给客户端，破坏缓存有效性
关键点在于：<template> 是客户端运行时的模具，而 SSR 缓存需要的是“已经锻造成型的零件”。两者不在同一工作阶段，强行拉在一起，只会让缓存失效、首屏空白、SEO 掉分。
