rel="prerender"在2026年已完全失效，仅可能触发dns预解析或tcp预连接，不下载html、不执行js、不影响seo；真正有效的预渲染需依赖构建时生成静态html文件。
rel="prerender" 在 2026 年已完全失效，写它不会触发任何预渲染行为。
它既不下载 HTML，也不执行 JS，更不生成可被爬虫读取的静态内容——浏览器（Chrome v110+、Edge）默认禁用，Firefox 和 Safari 从未支持。你在 里加了 <link rel="prerender" href="/product/123">，Network 面板里看不到请求，Performance 面板里没有 Prerender 阶段，控制台也无报错或日志：不是“没配对”，而是根本没走逻辑。
为什么 rel="prerender" 现在等于空标签
这个属性早在 Chromium M94 就被降级为兼容层，实际行为已被 speculationrules API 取代；当前主流版本中，它最多只做 DNS 预解析或 TCP 预连接，连 HTML 都不 fetch。
触发条件苛刻到无法落地：必须同源、无查询参数、无 hash、页面前台空闲、内存充足、未节电——真实用户场景里，切个 Tab 或滚动一下就中断。
更重要的是：它和 SEO 场景说的“预渲染”完全无关。前者是运行时投机行为，后者是构建产物里真实存在的 /product/123/index.html 文件。
prerender_html 函数根本不存在，别再搜了
你在代码或报错里看到的 prerender_html，99% 是某团队内部封装的 Puppeteer 调用函数，不是标准 API，也没有文档。
搜索它只会浪费时间，因为：
- 它没挂到全局上下文，ReferenceError: prerender_html is not defined 是常态
- Next.js/Nuxt 用户硬写这个函数，反而绕过 generateStaticParams 或 nuxt generate 的内置机制，导致 getStaticProps 不执行、hydration 错乱、线上白屏
- 真正起作用的是 puppeteer 实例、prerender-spa-plugin 配置，或框架原生导出逻辑（如 next export）
真正能落地的预渲染怎么做
判断是否成功，只看一个硬指标：构建后 dist/ 或 out/ 目录下有没有对应路由的独立 HTML 文件（比如 dist/about/index.html），且用 curl -I https://yoursite.com/about/ 能返回 HTTP 200。
根据技术栈选方案：
- Vue CLI（Webpack）项目 → 用 prerender-spa-plugin，关键配 renderAfterDocumentEvent: 'app-ready'，并在根组件 mounted() 中 dispatch 该事件
- Vite 项目 → 必须用 vite-plugin-prerender，routes 填路径（['/product/123']），不是文件名；别套 Webpack 插件
- Next.js App Router → 设 export const dynamic = "error" + generateStaticParams，跑 next build && next export
- 纯静态托管（Nginx/CDN）→ 别部署 prerender-node 这类常驻 Node 进程，它和静态环境冲突
替代 rel="prerender" 的可靠方案
要让导航“快到无感”，得组合用真正广泛支持的机制：
- 对下一页 HTML 用 <link rel="prefetch" href="/product/123" as="document">：所有现代浏览器都支持，只下载 HTML 不执行，配合前端路由可手动 hydrate
- 用户 hover/focus 时主动 fetch() 目标页 HTML，缓存到 sessionStorage 或 Cache API，点击时直接复用
- 用 <link rel="preload" href="main.css" as="style"> 提前拉首屏必需 CSS；字体必须加 crossorigin，否则白屏
- preconnect 提前建连 CDN 或 API 域名，但别超 4–6 个，且需加 crossorigin
真正难的不是怎么写一行 rel="prerender"，而是决定哪些页面值得预渲染、数据更新频率是否匹配、构建产物体积是否可控、缓存失效策略是否合理——这些权衡点，比一个早已失效的 HTML 属性重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
