过去,如果您访问网站或网络应用程序,每次您导航到不同的页面时,它都必须重新加载页面。由于多种原因,这很不方便。其中之一是整个内容都被刷新了,所以你丢失了滚动位置和所有数据,而且速度很慢。
后来, SPA的想法诞生了。单页应用程序不会刷新页面,而是由一个 HTML 文件以及一个或多个 JS 和 CSS 文件提供服务。应用程序动态更改应用程序的内容,因此不需要刷新。动态页面就是这样诞生的。
不幸的是,这种方法有一个缺点。搜索引擎爬虫无法索引动态页面。尽管有所有声明,Google 和其他搜索引擎仍无法索引和感知 SPA 网站。所以 SPA 总是伴随着 SEO 的惩罚。
因此,一些想法演变为使用现代 SPA 库和框架(如 React、Angular、Ember)并满足搜索引擎的需求。此外,拥有一个服务子页面并仅根据需要加载必要数据的服务器,同时保留动态有时可以提高 SEO 指标和加载速度。
当然,并非所有用例都需要 SEO 支持和最高加载速度。这些对于公共网站(例如电子商务商店或出版网站)来说是必需的。另一方面,您登录的应用程序通常不会从 SEO 中受益,因为它们没有索引,而且速度的轻微提高也不能证明使用服务器来提供初始页面的成本是合理的。
这意味着有地方可以使用 SPA,也有地方可以使用 Next.js 等全栈前端框架。
然而令人惊讶的是,新的 React 文档抛弃了 SPA。
我最近在设置新的 React 项目时注意到,新文档提供了如何设置 Next.js、Remix、Gatsby 和 Expo 的说明。第两个解决方案是全栈 SSR(服务器端渲染)框架,Gatsby 是一个静态站点生成器,后来发展为成熟的 SSR 框架,而 Expo 则用于构建移动应用程序。
缺少有关如何设置 SPA 的说明令人费解,特别是因为没有解释为什么没有信息为什么会发生这种情况。或者也许作者认为这太明显而无法解释?
事实证明,这是一个有意的举动。正如丹·阿布拉莫夫在推文中解释的那样:
4 月份的推文表明,从 React 文档中放弃 SPA 是一个有意的决定。Dan Abramov 表示,SPA 已经过时,不应该用于新应用程序,而应该使用使用 React 的全栈框架。
现在要构建SPA React应用程序,解决方案之一是使用Vite.js React模板。它设置了一个具有 Vite.js 速度提升的 React 应用程序。
我想知道你觉得怎么样?我们现在应该使用 Next.js 这样的 SSR 框架来编写所有应用程序吗?写一个评论!我很想了解您的想法!