SPA 的首屏和刷新 404 怎么处理？

单页应用只有一份 HTML，路径切换由前端路由完成，服务器默认不认识这些路径。刷新 404 时，让服务器把前端路由都回落到入口 HTML。首屏慢，是因为要先下载并执行脚本才画出内容，用拆包、缓存和必要时的服务端渲染来缩短。

原理

History 模式下，/user/1 刷新会向服务器要这个路径。静态托管要配置回落：找不到文件时返回 index.html，状态码仍应是 200，再由前端路由决定画页面还是「页内 404」。不要把所有真实的文件 404 都掩盖掉，存在的静态资源仍要正常返回。

哈希模式没有这个问题，但正式产品的地址通常不用它。

首屏：路由懒加载、入口只留当前页、图片和字体按需、接口不要串成一条链。见加载优化。需要搜索引擎看到正文或 LCP 很差时，再对那几页做 SSR 或预渲染。见 SSR。

客户端路由切换不会整页刷新，滚动位置和数据请求要自己处理。全局导航守卫里做登录判断，接口仍要鉴权。

追问

页内 404 和服务器 404？

服务器回落之后，所有路径都先拿到 HTML。前端匹配不到路由时，渲染自己的 404 组件。监控如果只看 HTTP 状态，会以为没有 404。重要的缺失资源不要也回落成 HTML。

部署在子路径呢？

base 要和资源公共路径一致，否则脚本 404，回落会变成反复返回 HTML。

易错点

只在开发服务器里配了 history 回落，生产的 Nginx 没配。
回落规则写得太宽，接口的 404 也返回了 index.html。
用 SSR 解决刷新 404。那是路由托管问题，不是渲染模式问题。

相关