从单页应用到 SSR，一步两步三回头

前端发展到现在，SPA 应该已经被应用的非常广了。可惜的是，我们前进的是快，而人家搜索引擎爬虫跟用户的浏览器设备还跟不上脚步。辛辛苦苦写好的单页应用，结果到了 SEO 跟浏览器兼容这一步懵逼了。

很多同学肯定都想过服务端渲染的问题。然而一看 Vue、React 关于服务端渲染的文档，可能就放弃了。嗯，我知道的，这就是我的感受。满脑子的概念，诸如同构、代码分割、按需加载、hydration，好像跟脱缰的野马一样乱窜。

在本文中，我们将探讨从 SPA 到 SSR 的演进过程，并介绍如何利用代码分割、按需加载和渐进增强等技术优化 SPA 的性能和 SEO 表现。

从 SPA 到 SSR

SPA（单页应用）是一种在客户端渲染所有内容的 Web 应用程序。这意味着页面上的所有内容，包括 HTML、CSS 和 JavaScript，都将在客户端加载并渲染。这种架构的好处是它可以提供更快的加载速度和更流畅的用户体验。

然而，SPA 也有一个缺点：它不利于 SEO。这是因为搜索引擎爬虫无法正确地解析和索引 SPA 的内容。

SSR（服务端渲染）是一种替代 SPA 的架构。在 SSR 中，页面上的初始内容将在服务器上渲染并发送到客户端。然后，客户端将接管并继续渲染页面上的其他内容。这种架构的好处是它可以改善 SPA 的 SEO 表现，因为搜索引擎爬虫可以正确地解析和索引 SSR 页面上的内容。

代码分割

代码分割是一种将 JavaScript 代码分成多个独立文件的技术。这可以提高 SPA 的性能，因为浏览器可以并行加载这些文件。

按需加载

按需加载是一种在需要时才加载 JavaScript 代码的技术。这可以进一步提高 SPA 的性能，因为它可以减少页面上的初始 JavaScript 代码量。

渐进增强

渐进增强是一种设计 Web 应用程序的方式，以便它们在所有设备上都可以正常工作。这意味着即使在不支持 JavaScript 的设备上，Web 应用程序也应该能够正常工作。

如何优化 SPA 的性能和 SEO 表现

为了优化 SPA 的性能和 SEO 表现，我们可以使用以下技术：

• 代码分割：将 JavaScript 代码分成多个独立文件，以提高加载速度。
• 按需加载：在需要时才加载 JavaScript 代码，以减少页面上的初始 JavaScript 代码量。
• 渐进增强：设计 Web 应用程序，以便它们在所有设备上都可以正常工作。
• 使用服务端渲染：在服务器上渲染页面上的初始内容，以改善 SEO 表现。

总结

SPA 是一种流行的 Web 应用程序架构，但它不利于 SEO。我们可以使用代码分割、按需加载、渐进增强和服务端渲染等技术来优化 SPA 的性能和 SEO 表现。