link rel="prerender" 在2026年chrome/edge中已基本失效，仅作为兼容层存在，不触发实际预渲染；真正有效的预渲染需通过构建时（ssg）或服务端（ssr）生成静态html文件。
link rel="prerender" 在当前（2026年）的 Chrome/Edge 中已基本失效，不是“没写对”，而是浏览器策略已变——它不再触发实际预渲染行为，控制台无报错、无日志、不加载资源、不执行 JS，只留个空壳提示。
为什么 link rel="prerender" 现在等于没写
这个标签在 Chromium M94 后被重构成 Prerender2.0，但底层依赖全新的 speculationrules API，原 rel="prerender" 已被降级为兼容层，仅在极少数内部导航场景下可能残留响应，对外部链接、带参数路由、跨域跳转全部忽略：
- Chrome DevTools 的 Application → Rendering 面板里看不到任何 prerendered page 实例
- Network 面板中查不到目标页面的 HTML、JS、CSS 请求发起记录
- 即使写成
<link rel="prerender" href="/about">，点击跳转后 Performance 面板显示仍是常规导航流程（Navigation Start → DOMContentLoaded），没有 “Prerender” 阶段标记 - Firefox/Safari 完全不识别该属性，连解析都跳过
真正能落地的预渲染必须走构建时或服务端
所谓“预渲染”，本质是把客户端渲染（CSR）过程提前到构建阶段（SSG）或请求阶段（SSR），生成真实 HTML 文件。浏览器原生 prerender 标签做不到这点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Vue CLI 项目：用
prerender-spa-plugin，确保renderAfterDocumentEvent: 'app-ready'且入口文件中 Vue 挂载逻辑等 DOM 就绪（document.readyState === 'complete'） - Vite 项目：必须换
vite-plugin-prerender，routes 填的是路由路径（如['/product/123']），不是 HTML 文件名；插件会启动 Puppeteer 实例访问这些路径并保存完整 HTML - Next.js App Router：弃用自定义脚本，改用
generateStaticParams+dynamic = "error"，运行next export输出带预渲染 HTML 的out/目录 - 纯静态托管（Nginx/CDN）：不能跑
prerender-node这类中间件，它需要常驻 Node 进程，和静态环境冲突
检查预渲染是否真生效的硬指标
别信控制台有没有 warning，直接看产物和网络行为：
- 构建后
dist/或out/目录下是否存在对应路由的独立 HTML 文件（如dist/about/index.html或out/product/123.html） - 用 curl 或无痕窗口直接请求该 HTML 路径：
curl -I https://yoursite.com/about/，HTTP 状态码应为 200，且响应头不含X-Prerender或X-SSR类标识（那是中间件方案，不是构建时预渲染） - 打开该 HTML 文件源码，搜索
<div id="app">.*?</div>—— 如果里面已包含真实内容（比如<h1>关于我们</h1>），说明预渲染成功；如果还是空<div id="app"></div>，那只是普通 CSR 页面 - 禁用 JS 后刷新页面，内容仍可见 → 是预渲染；内容消失 → 是假预渲染或根本没跑
最容易被忽略的一点：预渲染输出的 HTML 必须保留原始应用的 <script></script> 标签（尤其是入口 JS），否则客户端 hydration 会失败，页面交互失灵。删第三方统计脚本可以，删 app.js 不行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
