使用TanStack Start快速构建全栈应用程序

近年来构建应用程序变得越来越容易已经不是什么秘密。而随意编程只会让这变得更加简单。但是，如果有人甚至不知道全栈应用程序需要这些元素，他们究竟如何构建一个具有基于文件的路由系统、服务器函数、流式SSR和类型安全处理的全栈应用程序呢？

欢迎使用TanStack Start。TanStack并不是唯一的此类全栈框架，但对于初学者来说，它绝对是最容易上手的框架之一。与同样提供服务器端渲染和全栈功能的Next.js或Remix不同，TanStack Start强调类型安全的路由、服务器函数和最少的样板代码。这使得在不配置多个工具的情况下快速获得一个可工作的应用程序变得更加容易。

TanStack Start专为那些想要全栈框架的强大功能而不需要繁重配置开销或牺牲类型安全性的开发者而设计。或者，在本教程的情况下，为那些不完全理解全栈应用程序需要什么但仍想制作一些酷炫东西的新手开发者而构建。

TanStack Start使用TypeScript。

什么使得TanStack Start适合随意编程？

默认类型安全：与其他一些框架不同，TanStack Start确保你的路由、服务器函数和数据获取都是完全类型化的，减少了运行时错误。这对于随意编程来说很棒，因为你可以快速移动而不用担心在实验时破坏你的应用程序。

基于文件的路由：添加新页面就像创建一个新文件一样简单。无需手动配置复杂的路由。对于随意编程来说，这意味着你可以立即启动新想法并在浏览器中看到它们，而不会遇到设置麻烦。

服务器函数：你可以直接在应用程序中运行安全的服务器端逻辑，而无需创建单独的API。这让你可以快速编写全栈功能，而不用停下来构建外部后端。

流式SSR：你的页面渲染更快，因为TanStack Start可以高效地将内容从服务器流式传输到客户端。对于随意编程，这确保你的原型即使在添加更多功能时也感觉流畅和响应。

灵活轻量：虽然在精神上与Next.js相似，但TanStack Start更小、更容易定制，并且与TanStack生态系统紧密集成。这让你可以随意编码而不用与框架斗争，给你创造性的自由来构建你想要的东西。

你只需要安装Node.js和npm。我们将在项目本身中安装TanStack Start。

让我们一起回顾TanStack Start的基础知识，这样你就能自信地在这个框架之上构建应用程序。

这些是TanStack Start构建的基本原则。

根文件：将其视为每个页面的”父级”。在TanStack中，root.tsx是全局包装器。无论你导航到哪个页面，它都会保持在屏幕上。这是你放置导航栏、页脚和全局样式的地方，这样你就不必为每个页面重写它们。

索引文件：通常称为index.tsx，是默认入口点。将其视为主页。每当有人访问你的站点时，它会自动加载。

页面文件：这些是你的关于、产品、联系等页面。它们由TanStack Start转换为可点击链接和浏览器地址的单独路由文件制作。使用TanStack Start，你可以添加一个文件，TanStack Start会提供页面自动添加到你的站点所需的所有样板代码，而不是编写复杂的路由表。

在你的项目终端中，你可以使用以下代码创建一个新应用程序：

然后会出现一些提示。以下是你可以回答的方式：

项目名称：命名你的项目

工具链：ESLint

你想要演示页面吗？否

附加组件？无

然后我们准备安装依赖项

下一步是运行开发服务器。这可能看起来我们在过程中做得很早，确实如此。但这是使用TanStack Start的好处。你的应用程序已经安装了所有的螺母和螺栓。我们准备在安装后立即运行。

将你的浏览器导航到http://localhost:3000，你将看到TanStack Start默认页面。

一旦你通过在浏览器中看到样板应用程序确认你的设置工作正常，让我们回到IDE的文件树，这样我们就可以确切地看到我们正在使用什么。

你的项目结构应该如下所示：

__root.tsx

你可以在src/routes/__root.tsx中找到这个文件。

理解根布局帮助你看到各个页面如何适应整个应用程序结构。这是你应用程序的基础。它设置HTML结构，加载必要的脚本，并为每个页面提供一致的包装器。没有它，你的页面将无法正确显示，你的JavaScript将无法运行，标题或页脚等共享元素将难以管理。

这个文件包装你所有的页面。关键部分是：

：渲染当前页面（例如index.tsx）

这是你应用程序的主页。这是你的用户获得的第一印象。这是开始随意编程的绝佳地方，因为你几乎可以立即看到代码添加和更改。使用TanStack Start构建没有限制。所有的样板代码只是一个起点。

一些需要注意的重要部分：

createFileRoute(‘/’)将此文件映射到URL /，因此当用户访问你的主页时会显示此组件。

HomePage是为此路由显示的React组件。

你也可以在这里自定义。src/routes文件夹已经有一个额外的页面about.tsx包含在内。如果你将浏览器导航到http://localhost:3000/about，你将看到样板关于页面。

这是我最喜欢TanStack Start的部分。如果你想添加一个新页面，你所要做的就是将相同的样板代码复制/粘贴到routes文件夹中的新文件中。这也是随意编程使这变得更加容易的地方。

为关于页面提供的样板如下所示：

添加新页面非常容易。我们将在下一个示例中制作一个联系页面。首先，在routes文件夹中添加一个contact.tsx文件。我使用AI帮助我。我将about.tsx文件粘贴到AI工具中，并要求它将其转换为联系页面。它返回了以下代码来开始我的联系页面：

TanStack Start还有很多可探索的内容，但这些是主要的基础构建块。从本教程中最重要的收获是在网上获得一个工作原型是多么容易。TanStack Start帮助你随意编写实时应用程序，而不必考虑架构、路由或任何其他可能绊倒你并阻止你专注于更令人兴奋的业务逻辑的元素。

Q&A

Q1：TanStack Start与Next.js相比有什么优势？

A：TanStack Start相比Next.js更轻量、更容易定制，强调类型安全的路由和最少的样板代码。它可以让开发者快速获得可工作的应用程序而不需要配置多个工具，特别适合初学者和快速原型开发。

Q2：TanStack Start的基于文件的路由系统如何工作？

A：基于文件的路由意味着添加新页面就像在routes文件夹中创建一个新文件一样简单。例如，创建contact.tsx文件就会自动生成/contact路由，无需手动配置复杂的路由表，TanStack Start会提供所有必要的样板代码。

Q3：为什么说TanStack Start适合随意编程？

A：TanStack Start默认提供类型安全、文件基础路由、服务器函数和流式SSR等功能，让开发者可以快速移动而不用担心破坏应用程序。开发者可以立即启动新想法并在浏览器中看到结果，而不会遇到繁重的配置麻烦。