TanStack Start
TanStack Start 是一个基于 TanStack Router 构建的全栈 Web 框架，目前已支持 React 和 Solid。它结合 Vite 构建能力，提供类型安全路由、服务端渲染（SSR）、流式传输、服务端函数（Server Functions）等功能，让您能够构建高性能的全栈 Web 应用。
注意：
目前 Pages 支持 TanStack Start 1.0+ 版本，可实现全栈部署。
核心特点
类型安全路由：完整的 TypeScript 支持，路由参数和数据加载都具有类型推断。
全栈框架：支持服务端渲染、API 路由和前后端一体化开发。
文件式路由：基于文件系统的路由约定，自动生成路由树。
数据加载：内置 loader 机制，支持服务端数据获取。
流式渲染：支持 React 18 Suspense 和流式 SSR。
快速开始
您可以通过以下方式在 EdgeOne Pages 上部署 TanStack Start 项目：
通过 Git 仓库导入 TanStack Start 项目
从 Pages 的模板库选择 TanStack Start 模板
使用
@edgeone/tanstack-start 框架适配器部署本地项目了解 TanStack Start 在 Pages 的部署表现，可以点击下方的示例模板：
Pages 对 TanStack Start 的支持
TanStack Start 特性 | 支持情况 |
Server-Side Rendering (SSR) | ✅ |
Static Site Generation (SSG) | ✅ |
Single Page Application (SPA) | ✅ |
Route Loaders | ✅ |
Server Functions | ✅ |
File-based Routing | ✅ |
Streaming | ✅ |
在 Pages 部署 TanStack Start 项目
@edgeone/tanstack-start 是专为 Pages 平台设计的 Vite 插件，可自动将 TanStack Start 应用构建为 Pages 部署产物。结合 Pages 脚手架，实现 TanStack Start 项目的快速部署。要在 Pages 部署 TanStack Start 项目，可以参考以下操作步骤。
1. 安装适配器
npm install @edgeone/tanstack-start
2. 配置 Vite
在
vite.config.ts 中引入并使用 @edgeone/tanstack-start：import { defineConfig } from "vite";import { tanstackStart } from "@tanstack/react-start/plugin/vite";import viteReact from "@vitejs/plugin-react";import edgeoneAdapter from "@edgeone/tanstack-start";export default defineConfig({plugins: [tanstackStart(),viteReact(),edgeoneAdapter(), // Add the Edgeone adapter],});
3. 部署项目
Git 连接部署
CLI 部署
edgeone pages deploy
注意：
当前适配器暂不支持与 Nitro 插件同时使用。如需使用 Nitro，请等待 EdgeOne Pages 官方 preset 发布。
服务端渲染 (SSR)
TanStack Start 默认启用 SSR。通过
loader 函数在服务端获取数据。// app/routes/posts.$postId.tsximport { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/posts/$postId")({loader: async ({ params }) => {const post = await fetchPost(params.postId);return { post };},component: PostComponent,});function PostComponent() {const { post } = Route.useLoaderData();return (<article><h1>{post.title}</h1><div>{post.content}</div></article>);}
静态站点生成 (SSG)
支持在构建时预渲染静态页面。
// app/routes/about.tsximport { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/about")({// Static data pre-rendered at build timeloader: () => ({title: "About Us",description: "Learn more about our company.",}),component: AboutComponent,});function AboutComponent() {const data = Route.useLoaderData();return (<div><h1>{data.title}</h1><p>{data.description}</p></div>);}
Server Functions
TanStack Start 支持服务端函数，可在服务器上执行敏感操作。
// app/routes/api.tsimport { createServerFn } from "@tanstack/react-start/server";export const getServerTime = createServerFn().handler(async () => {return new Date().toISOString();});export const createUser = createServerFn().validator((data: { name: string; email: string }) => data).handler(async ({ data }) => {// Execute a database operation on the serverconst user = await db.users.create(data);return user;});
流式渲染
支持通过 React 18 的 Suspense 实现流式渲染，逐步传输页面内容。
import { Suspense } from "react";import { createFileRoute, Await } from "@tanstack/react-router";export const Route = createFileRoute("/dashboard")({// Return Promises without awaitingloader: () => ({posts: fetchPosts(),stats: fetchStats(),}),component: DashboardComponent,});function DashboardComponent() {const { posts, stats } = Route.useLoaderData();return (<div><Suspense fallback={<p> Loading posts... </p>}><Await promise={posts}>{(data) => <PostList posts={data} />}</Await></Suspense><Suspense fallback={<p> Loading stats... </p>}><Await promise={stats}>{(data) => <StatsPanel stats={data} />}</Await></Suspense></div>);}
