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 原语（如 TanStack Query）深度集成
• 以及更多内容即将推出！

能够将如此多的工作外包给 Nitro 和 Vite，并获得如此多的出色功能，这真是太棒了，但它绝对不是使用每个托管平台功能的完整解决方案，尤其是 Vercel，我们不仅可以访问部署。我们还在考虑边缘网络缓存等功能，以及我个人最喜欢的*偏差保护*。

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

我很乐意报告 TanStack Start 将提供极其强大的中间件原语（用于 API 路由和服务器函数 RPC），这将使此操作变得非常简单，甚至可能是自动的（希望如此）。

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

我认为 TanStack Start、Nitro、Vite 和 Vercel 的组合是提供一流 Web 应用体验的最佳组合。

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

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