SPA和React: 并不总是需要服务器端渲染

React文档建议选择支持服务器端渲染(SSR)的流行React框架之一，但是您是否真的需要SSR呢？

译自 SPAs and React: You Don’t Always Need Server-Side Rendering 。

您可能已经注意到，React文档的“开始一个新的React项目”部分不再推荐使用CRA(Create React App)。Create React App曾经是构建仅需要客户端路由和页面渲染的React应用的首选方法。然而，现在React文档建议选择支持服务器端渲染(SSR)的流行React驱动框架之一。

我已经使用文档列表中的所有“生产级React框架”构建过应用程序，但我也花了多年时间构建只需要客户端功能的单页面应用程序(SPAs)，一切正常。

尽管确实有许多应用程序需要服务器端渲染，但也有很多应用程序不需要。选择一个SSR React框架有可能制造问题而不是解决问题。

什么是SPA？

顾名思义，SPA只有一个页面。SPA可能有导航功能，但是当您从“页面”跳转到“页面”时，您体验的是路由，而不是页面。当您导航到一个新的路由时，React接管并使用客户端HTTP请求获取的HTML和(通常是)数据来“激活”“页面”。

什么是SSR？

与SPA不同，服务器端渲染的应用程序确实有页面。数据在服务器端获取，页面在那里编译，然后将最终输出作为完整的HTML网页发送到浏览器。

如前所述，使用SSR您需要一个服务器，通常这将涉及云提供商。如果您的SSR框架只与一个云提供商真正兼容，您可能会遇到供应商锁定问题。值得庆幸的是，像Remix和Astro这样的框架是“与服务器无关的”，所以您可以自带服务器，或者使用适配器在您选择的云提供商中启用SSR。

SPA存在的问题

反复出现的一个问题是“spinner-geddon”；每次您导航到一个新的“页面”时，都会显示一个加载动画来指示正在请求数据，只有在HTTP请求成功完成后，页面才会用内容进行渲染。

对SEO(搜索引擎优化)来说，SPA也不是很好，因为就谷歌而言，页面是空的。当谷歌爬行一个网页时，它不会等待HTTP请求完成，它只看页面中的内容/HTML，如果没有HTML那么谷歌如何给页面排名？

因此(和其他一些原因)，React应用程序开发已经朝着服务器端渲染的方向发展。但是，虽然上述两点听起来都是相当大的问题......它们真的是问题吗？

经典的开发者回应可能是: 这取决于情况。的确如此！现在我要讲一个几年前我构建的SPA的小故事，以便您自己判断。

SPA的完美可接受使用案例

回到2018年，我被一家“技术咨询”公司聘来执行一家位于伦敦的大型金融机构的“数字化转型”。

我的第一个项目是构建一个基于浏览器的解决方案，以替代一种过时的许可软件，该软件不再能满足其职责，更不用说还在耗费公司资金。该应用程序仅供内部使用，将只有三个用户: Margaret, Celia和Evelyn，一群即将退休的可爱团队，在公司发挥着重要作用。

我构建的应用程序约需8周完成，仅使用客户端HTTP请求从API获取数据，具有身份验证功能，使用现有的Azure DevOps管道进行了部署，并且没有进行搜索引擎优化。

Margaret, Celia和Evelyn非常喜欢它，她们不介意偶尔出现的加载动画-因为该应用程序为她们解决了一个问题。它还为公司解决了一个问题: 不再需要昂贵的软件许可。据我所知，它至今仍在使用。如果您想知道的话，我也碰巧知道Margaret, Celia和Evelyn都已经退休了。

SPA仍然相关吗？

我认为是的。有许多内部应用程序永远不会面向公众，也不需要使用更现代的React驱动SSR框架提供的任何功能。但是由于React文档不再推荐CRA，如果今天要构建SPA，您还可以使用什么呢？

使用Vite和React

Vite可以与React一起使用，作为比CRA中使用的Webpack(模块打包器)更现代的替代品。

“Vite是一个旨在为现代Web项目提供更快、更精简的开发体验的构建工具。”

我考虑过把这个转成教程，但实际上没有必要。

Vite文档在“构建你的第一个Vite项目”部分覆盖了您需要了解的一切；通过CLI提示选择，您可以在大约20秒内运行一个React应用。

从上图中您还可以看到，Vite不仅是一个构建React应用的好选择，它也适用于其他框架。

使用Vite的主要好处是什么?

简而言之，是打包。

在开发应用程序时，代码被拆分成较小的模块。这使功能更易于开发，并允许不同部分的应用程序共享通用代码。但是，在某些时候，所有这些模块都需要打包在一起形成一个巨大的JavaScript文件。浏览器需要这个巨大的JavaScript文件来运行应用程序。

每当保存一个文件时(在开发过程中会发生数十万次)，打包就会发生。使用像Webpack这样的工具，需要“拆除”并重建 bundle 来反映更改。只有在这个打包步骤完成后，浏览器才会刷新，这反过来又允许开发者看到他们的更改。

随着应用程序的增长和越来越多的JavaScript被添加，打包器需要做越来越多的工作。随着时间的推移，这个打包步骤开始花费更长的时间，真的会影响开发者的生产力。Vite通过利用原生ES模块和HMR(热模块替换)来解决这个问题。

使用Vite时，当一个文件被“保存”时，只有发生变化的模块会在bundle中被更新。这导致打包步骤要快得多，开发体验也更高效更愉快。

使用Vite还有许多其他好处，这些好处在文档中有清楚的解释: 为什么选择Vite。

最后的思考

所以，旧的被新的取代......但是React SPA的传统可以延续下去!

当然，在许多情况下，SPA并不是最合适的选择。然而，就SPA还是SSR而言，这不是“非此即彼”的选择，而应该是“兼容并蓄”的选择。