多年来，我们行业的趋势一直是构建单页应用程序或 SPA。
使用 SPA，整个网站或应用程序都存在于单个 HTML 文件中。初始加载后，应用程序的所有内容都由 JavaScript 处理。从理论上讲，这应该会导致 Web 应用程序感觉与原生应用程序一样快速和快速。
SPA适合什么？
首先，让我把这个问题说出来：有几个狭义的例子说明SPA有意义，是正确的选择。
YouTube是一个很好的例子。当你探索其他视频时，能够保持视频的播放是非常好的。像SoundCloud这样的音频网站也是如此，在那里你可以在浏览和探索其他艺术家时继续播放一首歌曲。所以......媒体网站，真的。
不过，一般来说，SPA作为一种行业趋势或 "最佳实践 "是错误的。
我们不断地重新发明轮子
浏览器为你免费提供了大量的东西：直接内置，开箱即用。
SPA打破了这一切，并迫使你用JavaScript重新创建它。
大多数开发者都做错了，而对于那些做对了的人来说，这导致了大量的额外代码来重新创建浏览器已经免费给你的功能。
在SPA中，当有人点击一个链接时，你需要...
- 确定该链接是指向当前网站还是一个外部位置。
- 如果是当前网站，则将URL路径与内容相匹配。
- 如果是API驱动的内容，则通过fetch()请求获得它。
- 更新URL路径和浏览器历史记录，不触发页面重载。
- 将内容渲染到页面上。
- 如果URL中有一个锚定链接，滚动到锚定元素。
- 将焦点转移到文档的顶部，或锚定元素（大多数SPA都会犯这个错误）。
- 向屏幕阅读器用户宣布页面加载/内容改变（许多SPA也会犯这个错误）。
- 如果你正在运行的任何脚本依赖于特定的DOM结构，或附着于特定的元素，请重新初始化它们。
你还需要检测用户何时点击浏览器的前进/后退按钮，并重复上述大部分步骤作为回应。
在传统的MPA/网站上，几乎所有这些东西都是由浏览器为你完成的。其中一些很容易。有些则是复杂而微妙的，或者容易出错，或者容易忘记。所有这些都给你的网站增加了大量的代码。
结果是，我们建立的东西很脆弱，很容易损坏。我们得到了 "改进的用户体验"，当所有的星星都完美地排列在一起时，我们就走上了这条路，而在一些边缘情况下，用户体验会差很多很多。
SPA是一个错误。
明天，我将向你展示我们如何建立和SPA一样性能的MPA，而且复杂性和脆弱性更低。