为什么 TanStack Start 正在放弃适配器

Tanner Linsley 写于 2024年11月22日.

构建一个新的前端 Javascript 框架是一项艰巨的任务，正如我在构建 TanStack Start（我新的 TanStack 驱动的全栈框架）时所学到的那样。其中有太多活动的部件：

• 路由
• 服务器端渲染
• RPC 和 API
• 开发工具
• 部署与托管

最后一个，部署与托管尤其棘手，因为如今似乎每个云环境都有其自己独特的咒语才能让事情“恰到好处”地运行。当为 TanStack Start 面临这个决定时，我显然知道我希望从一开始就支持哪些主机，而 Vercel 在该列表的顶部。

我的第一反应是开始构建一个可以为每个主机提供“适配器”的系统，然后首先专注于编写 Vercel 适配器。

然而，这个计划从一开始就是有缺陷的。没过多久我就意识到，我个人将负责（至少在开始时）编写大部分（如果不是全部）代码，以使 TanStack Start 不仅在 Vercel 上，而且在许多其他目标和平台上都能正常运行。经过一番快速研究，仅这项任务就足以让我质疑我构建服务器端 JS 框架的动机。

从技术上讲，仅部署到 Vercel 所需的工作已经非常简单，只需遵守一些输出文件/目录命名约定即可。然而，让我感到无从下手的是需要支持的环境/主机的数量之多。数量非常多！看看 Remix 不断增长的服务器适配器列表就知道了！Remix 也不是唯一拥有此列表的框架。大多数服务器端 JS 框架都有类似的东西。我基本上承诺在框架的最初几个月内编写至少 10 个适配器，而我几乎还没有开始接触框架本身的令人兴奋的功能（更不用说维护和更新这些适配器的工作了）。

这里的残酷现实是，没有办法绕过这个问题。 如果您的框架在其中提供了任何服务器端代码，您都需要确保它可以在您部署它的任何地方完美运行。

所以，就在我即将屈服于编写一百个适配器并余生都在处理上游重大更改的无限悲伤之时，我与我的朋友 Ryan Carniato 谈论了 Solid JS 如何通过我们的表亲框架 Solid Start 来解决这个问题，他自信地说：“只需使用 Vite 和 Nitro”。

Nitro 是一个“用于构建具有您自己观点的服务器端框架的 JavaScript 工具包”，由 Vite 提供支持。那么它有什么特别之处呢？

Nitro 中有大量很棒的功能，使其对于构建框架非常有用，但最酷的部分之一是它由 H3 和 Vite 提供支持。Nitro 的口号实际上是“创建包含您所需一切的 Web 服务器，并将它们部署到您喜欢的任何地方”（重点是我加的）。

简单来说，Nitro 有效地使 TanStack Start “无需适配器”。它使用 H3，一个 HTTP 框架，它代表您维护自己的底层适配器，因此您可以一次编写服务器代码并在任何地方使用它（听起来很像 React！）。

通过使用 Nitro，TanStack Start 的所有适配器问题都消失了。我甚至不必考虑它们！

事实上，部署到 Vercel 比我最初计划的还要容易：只需将一个 vercel 目标传递给我们 defineConfig 的 server.preset 选项，该选项会传递给 Nitro：

import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'vercel',
  },
})

import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'vercel',
  },
})

Nitro、H3 和 Vite 至少可以说令人印象深刻。 我们很高兴地看到，在我们第一次尝试时，一系列 Vercel 功能都完美地开箱即用，包括 GitHub 集成、服务器功能、边缘功能/中间件、不可变部署、环境变量、服务器端渲染，甚至流式传输。

这是一个巨大的列表，我们基本上通过使用 Nitro 和 Vite 免费获得了这些功能。

随着构建和部署问题的解决，以及将我的 GitHub 存储库直接集成到我个人最喜欢的主机提供商的内置支持，我终于可以专注于我认为使 TanStack Start 与众不同的地方：

• 一流的完全类型安全的路由器
• 用于构建服务器端 RPC 的灵活原语
• 可选的服务器功能（SSR、API、RSC 等）
• 以及与 TanStack Query 等其他 TanStack 原语的深度集成
• 还有更多精彩内容即将推出！

我们能够将如此多的工作卸载到 Nitro 和 Vite 并获得如此多很棒的功能，这真是太棒了，但这绝对不是使用托管平台所有功能的 100% 完整解决方案，尤其是 Vercel，我们不仅可以访问部署。我们还一直在思考诸如边缘网络缓存之类的功能，以及我个人最喜欢的偏差保护。

例如，偏差保护可确保客户端和服务器在其各自的部署中保持同步，这需要的不仅仅是一个构建步骤。它还涉及到在运行时将平台原语深度集成到框架中的能力，或者在特定情况下，能够将特定的 cookie 或标头注入到针对 Vercel 的传出 API/服务器请求中。

我很高兴地告诉大家，TanStack Start 将附带功能强大的中间件原语（适用于 API 路由和服务器功能 RPC），这将使其成为一行代码，甚至可能自动实现（希望如此）。

这种级别的开发者体验和集成让我对未来充满期待，我相信这才是开源的真正意义所在：将生态系统中强大的工具组合在一起，为开发者和用户提供令人惊叹的体验。

我想不出比 TanStack Start、Nitro、Vite 和 Vercel 更好的组合来为您提供一流的 Web 应用程序体验了。

TanStack Start 目前处于测试阶段！单击下面的 “部署” 按钮，即可在大约 1 分钟内创建并将 TanStack Start “基本”模板的新副本部署到 Vercel。

我们希望您喜欢我们正在构建的内容，并迫不及待地想得到您的反馈！