为什么 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/start/config'

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

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

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

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

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

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

• 一流的完全类型安全的路由器
• 用于构建服务器绑定 RPC 的灵活原语
• 选择性加入服务器功能（SSR、API、RSC 等）
• 以及与其他 TanStack 原语（如 TanStack Query）的深度集成
• 甚至更多即将到来！

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

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

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

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

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

TanStack Start 目前处于 Beta 版！点击下方的“部署”按钮，即可在约 1 分钟内创建并部署一个全新的 TanStack Start “Basic” 模板到 Vercel。

我们希望您喜欢我们正在构建的内容，并期待您的反馈！