2023 年 8 大 Web 开发趋势预测

（元）框架

单页应用 (SPA) 及其主流框架（如React.js、Vue.js、Svelte.js）经历了多年的发展。随着元框架的出现,我们看到应用呈现出从客户端渲染向服务端渲染转变的趋势.当使用基于JavaScript的开发框架时,SSR已经变得无处不在.

Next.js 的元框架基于 React 构建，并由 Andrew Clark 称为 2022 年"真正版本的 React 18"。它整合了由更低层构建块提供的所有功能（如 Suspense 和流式 SSR）。Vercel 已与 React 开发团队紧密合作并带来卓越的开发者体验。Remix 是一个替代 Next.js 的解决方案，并采用不同于其他方法将 React 转化为元框架——例如以 Web 标准作为核心组件。

尽管 Next.js 已经是现代 SSR 领域的有力竞争，但其他框架也值得关注：

• SvelteKit：以 Svelte.js 为基础构建，在1.0版本中得到了 Vercel 的支持；
  • SolidStart：以 Solid.js 为基础构建，在其开发过程中对 React 进行了优化。

渲染模式

近年来，在开发实践中, 单页应用（SPA）与客户端渲染（CSR）始终占据主导地位, 经历了从Knockout.js与Ember.js向Angular.js、React.js及Vue.js转型的过程。近年来, 对于采用元框架实现服务端渲染的技术趋势的关注度显著提升。

就外观而言，这个周期似乎即将结束。这主要因为多页应用 (MPA) 中长期采用SSR与JavaScript（如jQuery、MooTools、Dojo.js）进行功能扩展。相比之下，在过去使用JDK或Rails等框架进行SSR开发时更多地依赖Java语言本身。然而这次不同之处在于我们主要依赖JavaScript框架来实现动态交互。近年来Next.js一直是引领这一变革的主要力量；但其他元框架如SvelteKit也在迅速崛起。

SSR已与静态站点生成方案（SSG）展开长期竞争，并致力于追求最佳性能水平（参考Next.js及Gatsby.js）。然而它们的应用领域存在显著差异。后一模式主要用于静态内容（如博客等网站），而前一模式则适用于动态内容（如Web应用）。因需满足高动态性需求、用户为中心的内容以及身份验证功能等特殊要求，在部署前构建一次的开发效率较低的特性限制了SSG的选择范围；因此开发人员不得不在这两者之间做出权衡：要么采用按需构建服务端单一数据请求的SSR架构；要么选择仅在客户端获取个人数据记录的CSR方案。

CSR、SSR和SGG不被视为当前渲染技术的主要方向。尽管 SSR 和 SSG 在早期推动了性能优化，在细分领域中逐渐活跃起来的是增量静态再生 ISR 和流式 SSR 等新型渲染技术。这些新的方法促进了 SSG 的发展。然而随着技术的发展，在细分领域中逐渐活跃起来的是增量静态再生 ISR 和流式 SSR 等新型渲染技术。它们如何影响到 SSG 的发展呢？它们如何影响到 SSG 的发展呢？它们如何影响到 SSG 的发展呢？它们如何影响到 SSG 的发展呢？它们如何影响到 SSG 的发展呢？

另一方面, Streaming Server Push (SSP)技术通过改进服务端渲染机制,有效克服了传统单线程处理所带来的性能瓶颈.相比之下,传统Server Push模式需要在服务器端完成所有渲染内容的准备后才一次性发送给客户端.而采用流式Server Push方案,开发者便能够将应用逻辑划分为多个独立的部分进行处理,这些数据片段可以在不阻塞的情况下依次推送给客户端,从而实现了更高效的资源利用和用户体验提升.

在过去的几年里，SPA/MPA中的SSG与SSR渲染模式相对较为基础。然而，在这种基础上又发展出更为细分的版本逐渐兴起。除了基于异步 reflux（ISR）以及流量式超级分辨率（flow SSR）之外，在这种框架下还出现了渐进式的流水化处理能够更加精确地控制组件的合成顺序。此外，在这种架构下还引入了一种名为Island的技术体系也被用于MPA中的隔离性应用或组件架构（例如Astro），这一设计特点使得其在可恢复性而非传统的水流化机制上有着显著的不同（例如Qwik）。

JavaScript运行时

2009年, Ryan Dahl在其一次会议上宣布了Node.js的发布.最初, Node.js是一项将JavaScript与浏览器分离并在服务器上运行的实验性技术,后来成为了过去十年间JavaScript取得最大成功的重要推动力之一. Ryan Dahl在完全不依赖浏览器的情况下为Node.js采用了V8 JavaScript引擎（由Chrome实现）.因此,Chrome浏览器和Node.js应用使用相同的JavaScript引擎,但各自拥有独立的JavaScript运行时（例如,浏览器API与Node.js API）来与其交互.

在十年后的时间里,Ryan Dahl正式宣布Deno取代Node,并承诺将致力于为开发者打造一个更为安全与高效的开发环境,其中将包含诸如浏览器API,TypeScript以及内置的标准库等基础功能.Deno实际上基于V8引擎运行,但它目前仅是众多JavaScript执行环境中的一种存在.

边缘计算领域的竞争中，许多云提供商开发了专属自己的JavaScript运行时（如Cloudflare Workers），这些平台针对各自的技术架构进行了优化。因此，在构建Deno的商业模式时，其目前正通过Deno Deploy框架和实时边缘渲染SSR技术实现创新，并命名为Deno Fresh。类似Bun这样的不依赖现有云服务 provider的JavaScript运行时解决方案近期成为了该领域的又一焦点。

Monorepos

早期，在大型应用中主导代码库管理的是monorepos技术（即单个存储区域），这种存储区域通常包含一个项目的全部代码和相关依赖项。在这些相对较小的项目中（即每个项目都是一个独立的应用程序或模块），它们可以被整合到更大的可重用组件中（例如服务、组件或功能）。合并项目的做法起源于2000年代初期，在当时它被称为共享代码库策略。

如今 monorepos 已不再是大型应用的专属工具 为众多小型企业及开源项目提供了便利 举例而言 在monorepos中能够获取到各类资源 包括以下几种资源：首先是共享用户界面组件 其次是可重用的设计系统框架（如协作设计模式） 最后是各类功能模块的基础组件库

这些库可以在多个应用程序中导入：包括所有这些公共组件的实际应用（如app.mywebsite.com客户端渲染），同时考虑SEO优化的主页、产品及登录页面（如mywebsite.com采用服务端渲染或静态网站生成）。该方案仅依赖于公共设计系统组件，并配合公共UI组件和技术文档页面实现（如docs.mywebsite.com）。

Turbo Repo（已被 Vercel收购）又在JavaScript/TypeScript语言中推广Monorepo技术。 Turbo Repo支持团队能够在Monorepos中自动生成构建管道。其独特之处在于，在本地设备或跨团队云环境中能够有效地缓存这些构建行为。 Turbo Repo通过集成包括npm/yarn/pnpm在内的关键工具包，并结合版本控制系统等核心组件形成一个完整的生态系统体系，在今年的技术趋势中备受关注。

实用优先的 CSS

尾wind CSS被选为主打风格之一，在UI设计领域广受欢迎。不喜欢它在UI代码中的冗长显示形式的同时也赞赏它的强大功能（DX）。对于开发者而言，在项目中进行一次配置设置即可立即在其HTML环境中使用预先定义好的CSS样式表。

然而，在服务端渲染（SSR）这一趋势逐渐成熟之际，“实用优先 CSS”的支持者与批评者之间的对立可能将逐渐消解。近年来，在构建块式Web应用中CSS-in-JS解决方案如Styled components（SC）和Emotion等已经占据了主导地位。但若将SSR的主要关注点定位于性能优化，则会导致负面效果显现：不仅主控文件的文件大小有所提升（SC达12.7kB、Emotion达7.9kB），而且在DOM插入前由于CSS序列化导致的运行时开销也有所增加。

因此，在这一领域的发展趋势中，我们可能会转向更多采用SSR友好型解决方案的方向；例如将功能优先的CSS（如Tailwind CSS、UnoCSS）与标准化的UI组件（如DaisyUI）相结合使用；或者考虑其他同样流行的替代方案；例如采用CSS Module技术（亦称零运行时/编译时的JavaScript嵌入式CSS），这包括vanilla-extract、linaria以及astroturf等方法。

端到端类型安全

从JavaScript向TypeScript的转型势不可挡，在这场大规模Web开发迁移中

在客户端-服务端通信的Web开发实践中，REST和GraphQL常被采用。这些技术方案均可配合OpenAPI for REST框架及GraphQL Code Generator工具构建前端应用所需的规范文档。

作为一种新兴的技术安全API解决方案，在RESTful和GraphQL等流行框架之外崭露头角的是名为tRPC（Type-Runtime for Progressive Coders）的产品。特别适合基于TypeScript单文件仓库（monorepos）构建的应用场景，在这种架构下使用tRPC可以使前端开发者无需额外依赖类型化中间层即可直接获取所需数据类型。通过简单的HTTP调用方式即可完成客户端与服务器间的交互操作。随着技术的发展趋势愈发明显地倾向于采用更多此类安全可靠的技术方案来构建企业级应用体系架构，在全栈开发领域内已经形成了一定规模的应用生态体系。其中较为知名的包括tRPC、Zod、Prisma以及TanStack Router等工具集，在各类项目中均可见到它们的身影。

构建工具

在 React 中,CRA 已经持续主导了一段时间,成为主要工具之一。这一时期被视为 React 的革新阶段,因为初学者能够轻松地通过 create-react-app 获得一个无需配置的 React 入门项目,方便直接上手的学习体验得到了显著提升。不过,随着过去一年的到来,Webpack 已经逐渐被其他框架取代

Vite 是构建单页应用（SPA）的新兴技术，并帮助开发者快速搭建项目；它适用于所有流行的框架（如 React 和 Vue），帮助开发者快速搭建入门项目；由 Vue.js 创作者尤雨溪开发，并将其定位为下一代级别的前端开发工具；在其内部从 esbuild 引擎中获得了强大的功能支持；与基于 JavaScript 的其他构建工具相比；采用 Go 语言编写；因此打包依赖项的速度比其竞争对手（如 Webpack）快 10 到 100 倍

Vite生态系统的扩展主要得益于新增功能如Vitest等产品的加入。然而，在这一领域逐渐成熟之际，新兴竞争者Vercel推出的Turbopack正在迅速崛起。作为Webpack的主要发起者之一托拜厄斯·科普斯（Tobias Koppers）所主导的产品,Turbopack被视为Webpack真正的继承者。与此同时,当前主流框架Next.js仍继续使用Webpack作为其后端开发框架,由于两者均源自同一公司,因此未来有可能实现完美的协同工作状态

AI 驱动的开发

最终是否会导致开发者的工作被人工智能全面接手？这一问题尚无定论。基于人工智能的开发技术于二零二二年正式实现，并逐渐渗透到各个编程领域中去。随着 GitHub Copilot 的推出它允许开发者在一个自己喜欢的集成开发环境（IDE）中利用人工智能工具来完成编码任务。一旦开始编写代码（或以注释形式简要说明目标代码内容）GitHub Copilot将自动生成所需的实现细节。

然而AI驱动的应用远不止这些：由 OpenAI 开发的 ChatGPT 不仅具备强大的文本生成能力，在编程领域也有出色的表现。许多开发者已将 ChatGPT 作为替代平台使用。当将其用作搜索引擎的替代方案时，在多数情况下它都能提供有价值的反馈（尽管并非总是如此完美）。由于搜索引擎往往需要应对海量的相关性爬取（不仅涉及技术相关的内容），目前来看 ChatGPT 被视为应对这一挑战的有效解决方案。

其他

除了上面提到的趋势，还有很多值得一提的地方：

• Tauri 是 Electron 的一个替代方案, 主要用于开发基于 JavaScript/CSS/HTML 的桌面应用;
• Playwright 是 Cypress 提供端到端测试功能的一个重要替代方案;
• Warp 和 Fig 将引领下一代终端设备的发展;
• CSS 容器查询将成为响应式设计中处理复杂布局需求的主要工具;
• HTMX 作为强大的 HTML 工具, 在无需 JavaScript 时也能提供交互式的用户体验.

最后

最近又汇编了一份JavaScript与ES的学习笔记, 包含25个重点知识点, 并对每个知识点进行了深入的讲解和分析.这份笔记能帮助你更快地掌握JavaScript与ES的相关知识, 并显著提升你的工作效率

有需要的小伙伴，可以点击下方卡片领取，无偿分享