TanStack Start 比 Next.js 更好吗?

作者介绍了本视频将对比 TanStack Start 和 Next.js 两个框架,说明这是基于他昨天直播中用两个框架构建同一应用的经验总结。他强调这是个人主观看法而非客观对比,并解释了为什么只对比这两个框架而不包括 Remix、Nuxt 或 SvelteKit 等其他框架。作者特别指出 TanStack Start 本质上是 TanStack Router 加上服务端功能,如果不需要服务端渲染可以单独使用 TanStack Router。他澄清了一个常见误区:不应该把 Next.js 和纯客户端的 React Vite 进行对比,因为它们解决的问题不同。

在 AI 友好度方面,Next.js 明显优于 TanStack Start,因为 AI 聊天机器人对 Next.js 有更全面的了解,而对 TanStack Start 的知识可能是过时或错误的,因为它仍处于候选发布阶段。作者建议应该为 AI 提供适当的上下文,比如使用文档或 MCP 工具。在生态系统方面,Next.js 因存在时间更长、使用更广泛而拥有更多教程、视频和第三方包资源。从下载量数据可以看出,Next.js 的使用量远超 TanStack Start,部分原因是 Next.js 已成为 AI 推荐的默认技术栈之一,通常与 React、Tailwind 和 TypeScript 一起使用。不过 TanStack Start 的下载量呈现良好的上升趋势。

作者给两个框架都打了两个加号,但原因截然不同。Next.js 使用 App Router 入门相当简单,文档在引导核心概念方面做得很好,但深入学习缓存等高级功能时会变得复杂和困惑,尤其是 Next.js 的激进缓存策略可能让人难以理解和配置。TanStack Start 的入门可能稍难,因为文档不如 Next.js 完善,缺少数据获取等关键概念的清晰说明,而且需要同时参考 TanStack Router 的文档,初看可能让人不知所措。但作者指出,一旦克服了初始障碍,TanStack Start 的学习曲线更平滑,逻辑更清晰,没有 Next.js 那样的隐藏陷阱。总的来说,Next.js 入门容易但精通难,TanStack Start 入门稍难但后续进步更顺利。

在开发者体验方面,作者更偏好 TanStack Start。Next.js 存在几个问题:开发模式和生产模式下缓存行为可能不一致,需要频繁在生产模式下测试从而拖慢开发速度;使用 webpack 时开发服务器可能很慢,虽然新的 turbo pack 版本有所改善,但仍不如 TanStack Start 的基于 Vite 的设置快。TanStack Start 获得了三个加号的高评价,作者认为它速度快、可预测性强,大部分情况下没有奇怪的行为。虽然仍处于候选发布阶段还有一些小问题,但总体开发体验更流畅。作者特别强调这是基于个人经验的主观评价,不同开发者可能有不同感受。

两个框架都采用基于文件的路由方法,都有各自的命名约定,学习难度相当。Next.js 使用 page.tsx 文件作为页面,支持动态段和并行路由等复杂功能。TanStack Start 底层使用 TanStack Router,同样基于文件并有自己的命名约定。关键区别在于类型安全:TanStack Start 通过其基于文件的路由器提供完整的类型安全,这是一个显著优势。在 TypeScript 支持方面,虽然 Next.js 已经有很好的支持,但根据作者经验,TanStack Start 的 TypeScript 支持更好,不仅在路由方面,在服务器函数、数据获取和数据变更方面也提供更强的类型安全。作者认为使用 TypeScript 时 TanStack Start 是一种享受,并建议开发者应该使用 TypeScript。

这是两个框架最核心的差异之一。Next.js 主要使用 React 服务器组件(RSC),页面组件默认只在服务器渲染,永不在客户端重新渲染,因此可以直接在组件中放置数据库访问等服务端代码而不会泄漏到客户端。TanStack Start 采用不同方法:路由组件默认在服务器端和客户端都渲染,使用加载器模式(类似 Remix),通过 createServerFunction 包装的服务器函数来标记仅在服务器端运行的代码。对于数据变更,Next.js 使用带有 'use server' 指令的服务器操作,而 TanStack Start 继续使用 createServerFunction 方法配合 useServerFn 钩子。作者提到 TanStack Start 很快也将支持 React 服务器组件,但现有的加载器和服务器函数模式将继续存在。两种方法各有特点,总体思路相似但实现方式不同。

缓存是 Next.js 最难掌握的部分之一。Next.js 采用相当激进的缓存策略,在不同层级进行缓存,这可能非常复杂且令人困惑。作者在他的 Next.js 课程中专门涵盖了这个主题,强调这是从初学者成长为高级用户必须攻克的难关。虽然激进的默认设置可以为用户提供良好的性能,但开发者很容易出错。TanStack Start 的缓存策略更简单,默认设置良好但不如 Next.js 激进,最重要的是在开发和生产模式之间保持一致,避免了 Next.js 那种两种模式行为不同的问题。TanStack Start 会缓存路由导航时的数据一段时间以减少服务器请求,但不会在所有层级激进缓存。缺点是开发者需要自己设置缓存头和策略来获得最佳性能,需要比 Next.js 更多地思考缓存问题。

作者给两个框架都打了两个加号。Next.js 更加成熟,有成百上千的应用在生产环境中运行,但过去几年确实有不少 bug,特别是开发服务器崩溃问题,不过现在已经改善很多。作者提到了 React 的一些安全漏洞,但指出这主要不是 Next.js 的问题,而且未来类似问题也可能影响 TanStack Start,尤其是当它支持 React 服务器组件后。TanStack Start 仍处于候选发布阶段,作者确实遇到了一些奇怪的崩溃、错误信息和行为,考虑给一个加号,但鉴于它还在 RC 阶段,这个稳定性水平已经相当不错。作者特别提到他有生产环境的应用(如 buildmygraphic.com)使用 TanStack Start 驱动,运行良好,构建过程顺利,证明它已经可以用于实际项目。

在开箱即用功能方面,Next.js 明显更好,提供内置的图片组件和国际化支持,而 TanStack Start 没有这些功能。虽然这不是必需的,可以使用第三方包替代,但如果你需要这些功能,Next.js 可能是更好选择。在部署方面,Next.js 由 Vercel 开发,在 Vercel 上部署超级简单流畅,历史上在自己的服务器上部署有点困难,但 Next.js 团队已经做了很多改进,编写了更好的文档,现在在其他服务上部署也不会有太多问题。TanStack Start 的部署文档还有点棘手,有官方支持的合作伙伴如 Cloudflare 和 Netlify,文档相对完善。如果想在自己的 VPS 上用 BUN 运行,虽然有说明但作者发现有点难理解,遇到了一些问题,花了不少时间解决。作者认为一旦有完整的部署指南包含最佳实践和潜在陷阱提示,部署会变得更容易。

作者在结尾重申这些都是主观评价,基于个人经验和想法,希望听到观众的反馈。他询问观众是否已经从一个框架切换到另一个,对 Next.js 和 TanStack Start 有什么看法,是否正在考虑切换,或者使用其他完全不同的选择。整个视频强调了没有绝对的好坏之分,两个框架都有各自的优势和适用场景,选择应该基于项目具体需求、团队经验和个人偏好。作者通过多个维度的详细对比,帮助开发者更好地理解这两个框架的差异,从而做出明智的技术选型决策。