搜索引擎收录

• SPA 天然具有 App Shell，也就是作为入口的 HTML。
• 页面间切换顺畅，体验良好。

早期的几乎所有的搜索引擎都不支持索引 SPA，这导致 SPA 项目很少应用于依赖流量的用户产品类的 Web App，通常都只是作为内部项目的技术选型，当然这也是早期 Web 用户体验较差的一个原因之一。搜索引擎不能抓取和收录 SPA 有以下几个原因：

• 路由采用 hash 模式的 SPA 页面没有唯一的 URL，整个 SPA 站点都对应同一个 URL。

但是事实并非如此，这仅仅是 Google 提出并实践出来了的方案，而现在市场上存在的搜索引擎还有非常多，它们并没有都像 Google 一样完全支持了抓取 SPA。在中国，百度作为最大的中文搜索引擎，从 2018 年才开始逐渐支持对移动端网页的 JavaScript 渲染内容的抓取。甚至直到今天市场还有很多搜索引擎并没有支持在抓取页面的时候运行 JavaScript。因此许多开发者或运营者为了兼顾所有搜索引擎的流量，还是不愿意尝试将整个站点改造为 SPA。

• 结合 AMP/MIP。

当前许多 MVVM 前端开发框架都支持了 SPA/SSR 同构架构模式，如 React/Vue 等。通常采用 SSR 架构的 Web App 能做到第一次请求采用 SSR 模式直接在服务端渲染出内容，以供搜索引擎抓取和收录，第一屏无需在客户端通过执行 JavaScript 渲染内容，后续页面切换操作都是在客户端通过 pushState 的方式切换路由，采用前端渲染方式。这样既保证了搜索引擎的抓取和收录，也保证了 Web App 的良好用户体验。

SPA 和 AMP/MIP 的结合，也是一种对搜索引擎友好的方案，在下一小节，将重点介绍这部分的内容。