2023 年 10 大 Web 发展趋势

据我个人分析，在过去几年间（自2016年至2021年），Web开发的整体前景持续放缓。然而，在去年之前并未引起人们的广泛关注（参考State of JS报告）。在此文章中，我将详细阐述当前Web开发的趋势方向，并深入探讨这些新兴技术如何能够进一步激发开发者的工作热情与创新思维。

趋势

（元）框架
单页应用程序 (SPA) 及其各自均经历了一个概念炒作周期，并已持续存在多年。然而，在元框架在这些解决方案之上兴起后可观察到应用程式从客户端呈现模式转向服务器端呈现模式的现象愈发显著。如今，在基于 JavaScript 的开发框架下 SSR 已经无处不在。

React 核心开发人员普遍认为 Next.js 是 React.js 上最主流的元框架，并将其评价为 2022 年的‘真正 React 18 版本’。它集成了由 React 团队作为低层级基础构建模块所供应的所有核心库（如 Suspense、流式 SSR） library，并因其提供了这些功能而广受好评。Vercel（Next.js 后台公司的官方名称）与 React.js 核心团队紧密合作，致力于为开发人员带来卓越的使用体验。

许多开发人员对于Next.js与React.js之间紧密的关系表现出了担忧的态度。
但React.js存在替代品之一Remix（最近已被Shopify收购）。
Remix采用了不同的方法将React.js转变为元框架（例如，在转换过程中将其视为Web标准的一等公民）。
然而由于竞争的存在，在这两个框架之间也融合了功能（如嵌套路由）。

虽然 Next.js 已经是现代SSR领域的主要竞争对手，并且成功地促使许多前端开发人员自然地转变为全栈开发者。然而，在您的关注列表中同样不容错过的是SvelteKit...其最新1.0版本由Vercel和SolidStart（基于Solid.js构建）提供支持。相比React.js而言,DX得到了显著提升。

尽管过去十年间（2010年至2020年），以具有客户端呈现的单页应用程序（SPA）为主导的应用程序和渲染模式持续占据主导地位[1]。从 Knockout.js 和 Ember.js 到 Angular.js、React.js 和 Vue.js 等流行框架的发展历程中可以看出这一趋势的变化方向[2]。然而，在这一领域之外的应用多页面应用程序（MPA）依然在使用服务器端渲染技术，并结合 JavaScript 工具链如 jQuery、MooTools 和 Dojo.js 等实现了更高的可扩展性和性能[3]。值得注意的是，在早期阶段虽然基于 Java 的 JSP 或基于 Ruby 的 Rails 等技术也被用于服务器端渲染场景中[4]。然而在当前时代背景下 JavaScript 成为了主要的技术选择[5]。在此背景下 Next.js 作为引领该领域发展的核心引擎之一持续发挥着重要作用[6]。与此同时其他新兴的应用程序模板引擎如 SvelteKit 正在逐步缩小与主流技术之间的差距并逐渐成为不可忽视的力量[7]。

SSR 已经长期以来对抗静态站点生成 (SSG) 以实现完美的性能 (请参阅 Next.js 与Gatsby.js)，尽管这两种模式各自服务于不同的目的。这种模式专为静态内容设计（例如博客类网站），而另一种模式则适用于动态内容（例如Web应用程序）。如果搜索引擎优化相关，则两者都具有重要意义。然而，在开发者需要频繁更新动态内容或实现基于用户的逻辑并进行身份验证时，在服务器端一次性构建资源可能导致资源过时问题。因此他们必须在Server-Side rendered (SSR) 或最近的CSRs之间做出选择。

应用程序呈现模式

CSR、SSR、CSS 不是当前渲染技术的主要方向之一。尽管它们早在几年前就已经开始推动性能优化的趋势,但更具针对性的技术如增量静态再生（ISR）和流式SSR等逐渐活跃起来,其中前者推动了SSG的发展,因为它允许在每个页面的基础上静态重建网站（例如,每60秒重建页面X）而不是重建整个网站,而后者则通过应用程序公开的API接口实现动态更新（例如,当CMS数据发生变化时）。

同时，在减少资源竞争方面也采取了创新性措施

近年来，在SPA/MPA领域中使用的SGG与SSR渲染模式相对较为简单。然而，在过去几年里更为复杂的版本逐渐兴起。然而不仅仅是ISR与SSR流之间的关联变得更加紧密，并且有一部分通过像React这样的服务器组件实现了分层化的水流策略——其中一部分通过像React这样的服务器组件实现了分层化的水流策略——这种渐进式的流水策略能够以更加精细的方式管理水流顺序——而Island方法则被广泛应用于构建基于MPA的应用程序或组件架构（如Astro等）。替代水流模型的方法也逐渐成为主流选择（如Qwik及其Qwik City元框架）。

边缘无服务器
SSR 和 SSG 等渲染技术与边缘无服务器紧密相关，并非偶然现象而是必然趋势。这些技术均以高性能为目标，在浏览器中实现流畅体验是其根本目的所在。从根本上看，在线用户期待快速加载资源的需求推动了这一技术的发展进程

但让我们从头开始探讨：serverless computing这一概念的发展历程及其替代方案。它也被称为 serverless functionality, serverless computing 或者 cloud functions,其中 AWS Lambda 和 Google/Firebase Cloud Functions是其典型代表。尽管 serverless 计算仍然意味着一个正在运行的 (distantly running) 云服务,但它赋予开发者无需直接管理运行该服务所需的基础设施的能力。相反,开发者必须将单个函数部署为 serverless function,并由云服务提供商负责管理其扩展需求相关的基础设施。

通过将服务部署到全球各地的多个数据中心以外的架构模式（即所谓的按需服务架构），我们实现了另一种高效的业务模式解锁。这与传统的集中式服务架构不同，在这种分布式的架构模式下，并非必须将所有应用程序服务集中部署在一个或多个数据中心内。在理想情况下，在这种分布式的架构模式下，并非必须将所有应用程序服务集中部署在一个或多个数据中心内。在这种分布式的架构模式下，在线应用可以在离其目标用户的本地环境运行位置附近即可实现访问与操作；这不仅最大限度地减少了客户端与服务之间的往返延迟时间，并且显著提升了用户体验水平；同时这种架构模式使得边缘计算和边缘服务成为可能的技术基础。

多家云服务提供商（包括 Cloudflare 和 Cloudflare Workers、Vercel 边缘网络、Deno 和 Deno Deploy 等）在争夺这一领域的最佳解决方案的竞争中你争我夺。每个参与者都在致力于提升用户体验的关键指标——最佳交互时间 TTI）。边缘功能不仅能够通过缩短到最终用户的网络路径来加速 SSG/SSR 内容的交付而且还能将计算结果存储在距离用户更近的位置从而实现本地化处理以减少延迟响应时间。

除了性能之外，在边缘计算中还伴随而来的是诸如降低运算成本等其他好处

数据库复兴为无服务器技术的发展提供了契机。随着边缘计算环境中的无服务器技术普及，在线数据存储的需求也在不断增加。通过采用无服务器架构，开发人员通常会面临大量数据库连接同时打开的问题。每个连接都是独立于任何其他连接和任何其他设备的，并且是与数据库实现了一对一的关系。传统的解决方案是使用连接池机制来管理资源。然而，在这种情况下有两种选择：或者自行管理资源以避免过多占用单个节点资源而导致性能瓶颈问题；或者依赖外部服务来处理资源分配问题以维持系统的稳定运行。

当前在无服务器数据库领域处于领先地位的主要竞争对手包括PlanetScale（基于MySQL）、Neon（基于PostgreSQL）以及Xata（基于PostgreSQL）。这些解决方案提供了丰富的功能如复杂的分支结构、数据模式差异以及强大的搜索能力、分析能力和深入的数据洞察力等。当讨论全球范围内的无服务器解决方案时，请注意它们通常采用边缘缓存技术或提供分布式非读数据库来将数据存储得更加接近用户的最终设备。

如果第三方服务不仅负责您的数据库的传播和应用程序的传播，则通过Fly.io平台整合所有资源以实现统一管理。此举使我们超越了单纯依赖数据库的模式，并推动技术在其他领域的发展。Railway被视为Heroku的后继者，并为平台即服务提供了全面的支持。如果您希望将服务链向后端即服务迁移，则可通过使用Supabase平台即可获取Firebase的开源替代方案。该平台提供了应用程序与数据库托管、身份验证功能以及边缘计算能力。

JAVASCRIPT 运行时
始于 Ryan Dahl 于 2009 年召开的一次会议上宣布推出 Node.js 项目。最初这项研究旨在将 JavaScript 从浏览器环境中分离出来，并使其能够在服务器端独立运行的研究项目。这一创新后来成为了过去十年间推动 JavaScript 技术发展的重要驱动力之一。Dahl 开发了一个基于 V8 JavaScript 引擎的新环境，在不依赖任何现有浏览器的情况下实现了 Node.js 的功能。由此,V8 引擎不仅被 Chrome 浏览器所采用, node.js 脚本语言也分别提供了与标准 Web 语言不同的 API 接口。

十年之后,Ryan Dahl推出了Deno作为Node生态系统的替代方案,致力于为开发者打造一个更加安全可靠且效率更高的开发环境.该平台不仅集成了一系列类似于浏览器API和TypeScript的功能,还内置了多种标准库以简化开发流程.Deno采用的是V8引擎,但目前仅限于众多JavaScript执行环境中的一种

十年之后,Ryan Dahl推出了Deno作为Node生态系统的替代方案,致力于为开发者打造一个更加安全可靠且效率更高的开发环境.该平台不仅集成了一系列类似于浏览器API和TypeScript的功能,还内置了多种标准库以简化开发流程.Deno采用的是V8引擎,但目前仅限于众多JavaScript执行环境中的一种

在边缘功能的竞争中，许多云提供商均实现了自家的JavaScript运行时（如Cloudflare Workers），对自家基础设施（如Cloudflare）进行了优化。因此也在成为拥有一个名为Deno Fresh的概念验证框架，并命名为即时边缘渲染SSR框架的一家新公司。类似Bun这一类独立于任何云提供商解决方案最近成为了又一个备受关注的JavaScript运行时。

由于各个运行环境中专业的观察者能够识别JavaScript领域中的大量碎片。当出现问题时，在服务器环境中不同云服务提供商部署的情况下，并非所有JavaScript都在各自的运行环境中获得一致的支持。因此各方参与者共同参与了WinterCG项目，致力于解决不同JavaScript运行环境间的API兼容问题。

个人仓库
早期 monorepos 主要服务于大型应用程序，在一个版本控制的存储空间中包含较小的应用程序或模块。这些较小的应用程序或模块都可以是从单个应用（如前端应用 SPA、后端应用 MPA）到可重用组件（如功能模块、服务或其他资源）的任何转换。将项目的代码进行整合的做法可以追溯到 2000 年初时期，在当时这种做法被称为共享代码库。

然而 现如今 monorepos 不仅主要为大型应用程序 而言 而且毫无疑问 小型企业与开源组织也将从中获益。例如 一家企业可以在同一个存储库中管理多个包 包括 共享用户界面组件 共享的设计系统（如 可重用协作设计） 以及 每个领域常用的工具程序功能。

这些软件组件可在不同应用场景中被集成：通过整合所有共享组件的解决方案，在诸如在线应用、移动端平台及桌面应用等环境中实现无缝协作。支持主界面及其登录页面（如 mywebsite.com 在线展示与服务器端同步更新）的同时，默认情况下不依赖于非标准化组件以确保SEO优化。为了提升搜索引擎排名仅依赖于标准化的设计组件，并且在技术文档中统一应用统一界面元素及标准化设计（如 docs.mywebsite.com 示例）。

单一仓库

Turborepo, now under Vercel's ownership, continues to actively promote monorepo in JavaScript and TypeScript environments. It permits teams to establish build pipelines for all their applications and packages within a monorepo. Notably, these pipelines cache builds locally on machines or across teams in the cloud. Furthermore, by integrating with npm/yarn/pnpm workspaces (dependency management) and change sets (version control), Turborepo solidifies its position as a significant tool in the monorepo ecosystem, making it a notable area of focus this year.

Turborepo的主要竞争对手包括NX科技、Rush以及Lerna（曾一度处于停运状态，并于最近被NX科技旗下的另一家公司Nrwl成功收购）

实用优先的 CSS
开发人员通常会支持它或反对它：Tailwind CSS是实用优先CSS的一种典型实例。一方面开发者不认同其UI代码过于冗长；另一方面开发者则赞赏其卓越的设计体验。作为开发者，则只需对其配置一次即可立即在其HTML环境中使用预定义的CSS样式。

伴随服务器端渲染（SSR）技术的发展演变,对实用程序优先CSS的支持者与批评者的争论可能会逐渐平息。过去几年间,styled Components(SC)与Emotion等CSS-in-JS解决方案始终主导着基于组件的Web应用开发生态。然而,当关注性能问题时会出现…在SSR环境下,采用CSS-in-JS可能会带来两个显著的问题:首先,其体积较之前有所增长(SC为12.7kB,Emotion则为7.9kB);其次,由于传统的CSS序列化可能导致较高的运行时开销而被整合到DOM中。

因此这可能促使开发人员转向更适合SSR的解决方案这包括如utility-first-CSS框架如Tailwind CSS和UnoCSS与其预定义的UI组件如DaisyUI搭配的方式此外还有其他流行的选择如CSS Modules这些有时被称为零运行时失败者或在编译时间进行CSS操作的JavaScript库比如vanilla-extract linaria astroturf和compiled选项。

采用 TYPESCRIPT 实现其全链路类型安全性时,JavaScript向TypeScript的转型势不可挡地得以推进.在Web开发领域的重大迁移中,全栈应用中的全链路类型安全性无疑是这一转型的核心目标.此概念的实现与通信层（API）相关联,而通信层则负责将预先定义好的类型实体（如Type User、Type BlogPost）从服务器传递至客户端应用程序.

在客户端-服务器通信的Web开发实践中，REST与GraphQL通常被视为主流的技术规范。这两种方法各自都能配合OpenAPI for REST和GraphQL Code Generator for GraphQL协同工作，在前端应用中自动生成规范化的模式文件。

然而，在TypeScript生态系统中出现了一个叫做tRPC的新解决方案（REST/GraphQL替代品），它标志着这一领域的重要进步。在一个前端和后端共享代码的工作环境中（TypeScript monorepos），您可以通过tRPC将所有从后端导出到前端的应用程序中的类型无需任何中间层生成来实现。之后，在这种环境中工作时，“您只需利用通过HTTP连接到后台并调用经过类型化的API来实现客户端与服务器之间的实际通信”。这一趋势将朝着采用更多此类类型的解决方案的发展方向迈进。例如，在全栈开发中广泛使用的工具如tRPC、Zod、Prisma以及TanStack Router等工具也在边缘层提供类型安全功能。

主要工具 在 React 社区中, create-react-app (CRA) 已经持续为主导工具 使用超过十年,这一现象在当时引起了广泛关注,因为这一选择不仅简化了配置过程,还为开发者提供了一种无需手动配置 Webpack 即可快速搭建 React 项目的能力. 随着时间的推移,随着技术的发展,Wavelet 的普及使得它逐渐被替代.

构建工具

Vite被视为单页应用程序（SPA）领域的新兴工具，并支持与多种主流开发框架（如 React.js）协同工作以简化开发流程。由 Vue.js 创作者 Evan You 开发，并声称要成为下一代前端开发工具的标准。其核心组件整合了 esbuild 这一强大功能库，并采用 Go 语言构建。相比其他知名打包器如 Webpack，在打包性能方面表现更为突出。

尽管 Vite's 生态系统因新增功能如 Vitest（Jest 的测试替代品）而迅速发展, 然而, Vercel's 涉及到 competitors 如 TurboPacak 已经出现. TurboPacak 被视为 Webpack 的延续者, 其创建人是 Tobias Koppers. 由于 Next.js仍依赖于 Webpack, 而 TurboPacak 则由同一公司开发, 因此我们可以预期 Next.js 和 TurboPacak 在未来可能是绝配.

就是否最终会取代开发人员的工作而言，在目前还没有确切答案的情况下

不仅仅如此：由 OpenAI 开发的 ChatGPT 模型也是一种功能更为全面的语言模型，并且它还能执行编程相关的任务。您可以通过 ChatGPT 提出各种类型的问题，并且它同样具备编程能力。如今已有许多开发者将 ChatGPT 视为 StackOverflow 的替代选择，在某些情况下将其用作搜索引擎的替代方案时，ChatGPT 可以提供相应的解答（尽管有时也会出现不尽如人意的情况）。由于后者需要处理大量与SEO相关的垃圾邮件（包括与开发内容相关的信息），因此目前来看这种解决方案是可行的。

不过，“当前”是这里的重要术语。从宏观视角来看，在线AI创建的内容同样具有威胁性。虽然人工创建的SEO内容已经是一个问题，在此背景下没有人阻止其他人利用ChatGPT自动生成更多的SEO内容。ChatGPT是否会最终训练自己生成的内容？

有一些值得记住的值得重视的提及, 但它们并未成为主流趋势: Tauri 作为一个替代方案用于由 JavaScript/CSS/HTML 实现桌面应用程序, Playwright 则是 Cypress 的端到端替代方案测试, Warp 和 Fig 分别充当下一代终端, CSS 容器查询则充当响应式设计中的 CSS 媒体查询替代方案, 最后但同样重要的是 htmx 作为一个丰富的 HTML 替代方案, 可在无需 JavaScript 的情况下创建交互式用户界面. 因为我在本节中仅提供了一个简短总结, 我鼓励你自己进一步探索相关内容!