2023 年 10 个前端 Web 发展趋势总结！ _前端

文章插图

值得一提的是，本篇文章是对 ROBIN WIERUCH 发表的《 10 Web Development Trends in 2023 》的文章的翻译，但是对部分内容进行了补充和修改，不喜勿喷。关于文章内部提到的诸多概念和前沿技术以前也有单独文章介绍过，下面是部分文章的传送门：

《 Turborepo v1.10 发布！Turbopack 还能更快？》
《 Svelte 4.0 发布，距 Svelte 3 已过去四年！》
《 Svelvet v8.0发布！Svelte前端生态又一王牌？》
《运行时 Bun 又添王炸，支持 Bun宏！》
《 CSS vs. CSS-in-JS：2023 年你应该如何选择？》
《全栈框架 Remix 大火？v1.16 发布，全力备战2.0！》
《 SolidJS ：2023年颠覆 JavaScript 生态的突破性框架！》
《 SSR 的升级版：流式服务端渲染原理！》
《 Astro 2.x大火！深入混合渲染原理与5+新特性！》
《 Builder.io 赢了！Qwik可恢复性与 SSR 的较量！》
《孤岛架构让Marko、Astro、Qwik、fresh等5+框架火出天际！》
更多内容，在主页继续阅读

话不多说，直接进入正题！
元框架兴起单页应用程序 (SPA) 及其各自的框架（例如： React.js、Vue.js、Svelte.js）已经经历了很长的发展周期。然而，随着元框架的兴起，应用程序表现出从客户端（CSR）转向服务器端渲染（SSR）的明显趋势。如今，在使用 JAVAScript 框架时，SSR 无处不在。

元框架（Meta-Framework）是指一种框架的框架，即在现有的框架之上构建的框架，它的主要作用是为了更好地组织和管理多个框架之间的关系，从而提高开发效率和代码复用率。

文章插图

最流行的元框架 Next.js 位于 React.js 之上。React 核心开发人员 Andrew Clark 称其为 2022 年“真正的 React 18 版本”，其具备 React 提供的所有功能，例如： Suspense、流式 SSR 。目前，Vercel（Next.js 背后的公司）和 React.js 核心团队正在密切合作，提供出色的开发人员体验。
尽管许多开发人员以担忧的姿态时刻关注 Next.js 和 React.js 之间的密切关系，但 React.js 还有其他替代方案，例如： Remix（最近被 Shopify 收购）。Remix 采用了不同的方法将 React.js 转变为元框架，例如：使用 Web 标准作为一等公民。但由于 Next.js 和 Remix 之前存在竞争，两个框架之间也存在一些聚合功能（例如嵌套路由）。
尽管 Next.js 已经是现代 SSR 领域的有力竞争者，并且将许多前端开发人员自然地转变为全栈开发人员，但是很多其他框架也同样优秀，值得关注。比如：SvelteKit（基于 Svelte.js 构建）及其最近的 1.0 版本由 Vercel 和 SolidStart（基于 Solid.js 构建）支持，与 React.js 相比，其 DX 有很大的改进。
应用程序和渲染模式虽然过去十年（2010 - 2020）一直由单页应用程序（SPA）及客户端渲染（CSR）主导，从 Knockout.js 和 Ember.js 到 Angular.js、React.js 和 Vue.js，过去几年人们对使用元框架的服务器端渲染（SSR）越来越感兴趣。
从表面上看，这个循环似乎已然结束，因为之前很长一段时间（2005 - 2010 年）一直在多页面应用程序 (MPA) 中使用带有 JavaScript（例如 jQuery、MooTools、Dojo.js）的 SSR 。然而，虽然以前 Java（例如 JSP）或后来的 Ruby on RAIls 已用于 SSR，但这次有所不同，因为已然改为依赖 JavaScript 。几年来，Next.js 一直是这一趋势背后的驱动力，然而，SvelteKit 等其他元框架也正在迎头赶上。

SSG (Static Site Generation) 是指在应用编译构建时预先渲染页面，并生成静态的 html 。把生成的 HTML 静态资源部署到服务器后，浏览器不仅首次能请求到带页面内容的 HTML，而且不需要服务器实时渲染和响应，大大节约了服务器运维成本和资源。

SSR 长期以来一直在与静态站点生成 (SSG) 竞争性能，尽管这两种模式服务于完全不同的目的。后一种模式用于静态内容（例如博客等网站），而前者用于动态内容（例如 Web 应用程序）。如果在 seo 的视角来看，SSR 和 SSG 都有意义。然而，由于需要高度动态的内容或具有身份验证的以用户为中心的内容，开发人员无法选择 SSG（部署前构建一次，因此是静态的），而必须在 SSR（根据服务器上的单个数据根据请求按需构建）之间做出选择或 CSR（按需获取客户端上的个人数据）。