为什么 Google 在 Angular 构建的页面的索引和缓存方面存在问题？

Question

如果我理解正确的话，通常的 HTML 页面和 Angular SPA 之间的区别如下：

HTML页面：用户从浏览器向服务器发出请求后，服务器会传递一个包含内容的HTML页面，
Angular SPA：用户从浏览器向服务器发出请求后，服务器会交付一个具有空 HTML 结构的页面。然后 AJAX 请求启动，服务器传递带有页面内容的 JSON。

Google 对 SPA 进行索引存在什么问题？问题是 JSON 到达的时间晚于 Googlebot 可以等待的时间（约 5 秒）吗？

有人可以向我解释一下这个问题吗？

Answer 1

一般来说，搜索引擎蜘蛛很简单。他们解析页面上的 HTML。如果他们来到 SPA（他们不知道这是 SPA）并且内容为空……他们就没有什么可以蜘蛛抓取的。这是一个巨大的过度简化，但在今天也可能不是 100% 正确。

转到任何 Angular 应用程序并查看源代码（不是实时的开发工具），您将看到搜索引擎蜘蛛（通常）可能看到的内容。

但是，Angular 有一个解决方案！ Angular Universal/SSR（服务器端渲染）

对于没有外部数据的简单应用程序，您可以预渲染所有路由，以便它们作为静态 HTML 页面存在，然后 Angular 将在应用程序水合时将其用作起始状态。

对于更复杂的应用程序，您可以通过 Express 服务器在服务器端渲染 Angular 页面，以实现 SEO（和其他）目的。

我有两个简单的 Angular 站点，它们不需要外部数据，并使用 SSR 预渲染所有路由以用于 SEO 目的。 https://lyricconverter.net - 去那里查看源代码，你会看到一切从一开始就在那里（尽管它针对文件大小/速度进行了压缩）