随着 Web 技术的蓬勃发展，服务器端渲染（SSR）逐渐成为了当下前端页面追求高性能的主流技术，用 SSR 构建的项目往往首屏渲染会非常丝滑。但是 SSR 渲染也有可能带来一些其他的性能问题。

　　我之前做过的很多项目都围绕调试 Node.js 性能问题展开。在这些场景中，导致性能问题的罪魁祸首基本上都是 SSR。SSR 是一种占用 CPU 的活动，很容易成为阻塞 Node.js 事件循环的主要原因菲律宾小火箭节点。

　　所以，我对当今最流行的前端库在 SSR 性能方面的现状进行了测试。为此，我构建了一个包含大量元素的样本网站，然后捕获每个库的性能表现。

　　因此，我们请一个 LLM 编写了一些代码，在容器中使用 div 元素作为 10x10 像素的瓷砖来绘制螺旋：

　　随后，我们要求它使用我们计划测试的所有库创建相应版本，并将实现适配为使用每个库的渲染引擎，而不是依赖于原始示例的 DOM 方法。

　　下面，我们将实现执行 SSR 所需的最少样板代码，并比较五大前端库的性能：React、Vue、Solid、Svelte 和 Preact。

　　我们本次的测试不考虑像 Next.js、Astro 和 Qwik 等工具，以及其他完整的框架，因为它们不提供单独的渲染方法。

　　我们首先介绍一个特例：fastify-html，这是一个封装了 ghtml 的 Fastify 插件，每秒可以处理 1088 个请求。就像前面所说的，这种设置不同于其他设置，因为它不需要 Vite，因为不需要特殊语法或转换。

　　fastify-html 被添加到测试中作为一个基准。由于它只是一个简单的 HTML 模板库的封装，没有其他库的高级特性，所以它与其他库的对比并不是非常恰当。基于它的简单特性，我们已经预期它会表现得更好，并想看看其他功能齐全的库与它相比会差多少。

　　位居第二，如果您想要出色的 SSR 性能并想要一个真正全面的库生态系统，Vue 每秒可处理 1028 个请求，它可能是最好的选择。

　　位居第三的是 Svelte 5（仍是 pre-release 版本）每秒发送高达 968 个请求，考虑到其丰富的功能集，这个表现还是相当不错的。

　　Svelte 拥有自己的非 JSX 模板语法，并且其引擎非常高效，如果你需要一个具有成熟库生态系统的框架并且不想在 SSR 性能上妥协，那么它也是一个绝佳的选择。

　　排名第四的是 SolidJS，每秒处理 907 个请求。它仅以微小的差距落后于 Svelte。

　　我在测试的时候注意到 SolidJS 在其 hydration 过程中使用 ID 其实会导致一些性能问题。对比 Vue 和 Solid 生成的标记如下：

　　这意味着性能开销很大一部分来自于这些需要传输的额外片段。不过，我们希望验证的也正是这一点：在常见、真实的使用情况下（启用 hydration 客户端功能）框架的表现。

　　React 的 “弟弟” Preact 排名第五，每秒处理 717 个请求。尽管 Preact 与 React 非常相似，但很多细节上的差异使得 Preact 更快且更轻量。