什么是 SPA (Single-Page Application)？有什么优点和缺点？
2023年2月24日
什么是 SPA (Single-Page Application)？
Single-Page Application（SPA）是一种网页应用的架构，在 SPA 中，整个应用程式的所有内容都在一个页面中呈现。 Gmail 就是一个很好的例子，使用者可以在同一个页面查看不同信件、回覆和编辑信件，而这全部操作都不需要刷新重整页面。当使用者在查看一封新邮件时，应用程式只需要动态载入和显示所需要的新数据，而不是加载整个新页面。
SPA 的成功主要得益于前端技术的不断演进，例如 AJAX 可以动态加载资料，又例如 React 应用程式搭配 React Router（前端路由工具），在不重新加载整个页面的情况下，在应用程式中内部转导页面，并动态更改显示的内容。
SPA 优点
更好的用户体验：
SPA 提供了一个更流畅，更快速的网页体验，因为它不需要为每个请求重新加载整个页面。这可以让网站看起来更像一个原生的 APP，进而提升使用者体验。
前后端分离：
在 SPA 中，前端主要负责页面渲染和互动，后端负责提供数据和 API。如果不使用 SPA 架构，那么将会使用传统的多页面架构，当使用者请求新页面时，后端会回传完整的页面。因此 SPA 这种分离可以使得前端和后端的开发和维护更加独立，也可以提高网站的效率和可靠性。
SPA 缺点
SEO 较差：
因为 SPA 只有一个页面，其他资料都是透过 JavaScript 动态渲染，因此搜索引擎的爬虫无法正确的索引页面内容，进而影响了网站的排名。
JavaScript 档案过大：
SPA 会需要透过前端大量的 JavaScript 来提供使用者互动或加载资料，此外随着 SPA 应用程式变得越来越复杂，其所需的 JavaScript 档案也会随之增大，这些原因可能会造成 SPA 加载 JavaScript 档案时变得缓慢。
SPA 缺点解决方式
在前文中，我们了解了 SPA 的优点和缺点。尽管 SPA 可以提供更好的用户体验和前后端分离，但它也存在一些缺点。其中，SEO 较差和 JavaScript 档案过大是常见的问题。在面试中，面试官通常会追问这些问题的解决方案。因此，在本段中，我们将针对这两个问题提供一些解决方法。
首先，让我们来看一下 SPA 的 SEO 问题。为了解决这个问题，我们可以使用 SSR (Server-side Rendering) 或是 SSR (Server-side Rendering) + CSR (Client-side Rendering) 的方式。
SSR 可以在服务器上完整渲染 HTML 页面，并将其发送给使用者，使搜索引擎可以正确索引页面内容，从而提高网站排名。而 SSR + CSR 的搭配，则可以在第一次将服务器生成的静态 HTML 发送到客户端，提供更好的 SEO 和更快的页面加载速度，同时还提供了预先渲染的页面。当后面的画面需要更多的互动与交互时，可以使用 CSR 来达到此目的。
其次，让我们来看一下 SPA JavaScript 档案过大的问题。为了解决这个问题，我们可以使用懒加载(lazy loading)、代码分割(code splitting)、压缩等技术，减少 JavaScript 档案的大小，或是只在需要时加载特定 JavaScript 档案，这样可以减少档案大小，并提高页面加载速度。
以上就是解决 SPA 缺点的一些常见方法。当然，这些方法只是其中的一部分，根据具体情况，可能还有其他更好的解决方案。在面试中，我们需要能够灵活运用这些知识，结合实际情况，提出更加有效的解决方案。