404页面本质必须是静态HTML且服务器返回真实404状态码；所谓“动态”仅限无JS降级前提下的轻量增强，核心内容与导航须内置于HTML源码，任何依赖JS渲染主体或改变状态码的行为均破坏404语义。
所谓“动态404页面”，本质是个误导性说法——404.html本身必须是静态 HTML 文件，且服务器必须返回真实 404 Not Found 状态码；任何依赖 JavaScript 渲染主错误信息、跳转逻辑或搜索行为的“动态”，都会在 JS 失效、加载失败或被拦截时导致白屏、错位或功能瘫痪。
为什么不能用 React/Vue 渲染 404 页面主体
单页应用（SPA）的路由兜底页（如 createBrowserRouter 的 errorElement）只是前端捕获错误后渲染的组件，响应头仍是 200 OK。搜索引擎不认它，浏览器也不触发重试机制，用户刷新页面会卡死在同一个“假 404”上。
- React Router 的
errorComponent返回的是 200，不是 404 - 若你把
404.html改成404.jsx并由构建工具生成，那它只是个普通 HTML 字符串，仍需服务器配置error_page 404 /404.html才生效 - 真正要“动态”的部分（比如显示当前请求路径、referrer、搜索关键词），只能用原生 JS 做轻量级填充，且必须有无 JS 降级方案
如何安全地在 404.html 中嵌入轻量动态行为
允许加 JS，但仅限于增强，不能用于核心信息展示或导航控制。所有关键内容（、返回首页链接、搜索表单）必须在 HTML 源码中存在，且不依赖 JS 加载。
- 显示当前路径：
document.getElementById('path').textContent = location.pathname，但前提是404 Not Found
- 自动聚焦搜索框：加
autofocus属性即可，无需 JS；若需兼容旧浏览器，可加<script>document.querySelector('input[name="q"]')?.focus()</script>，但必须放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
