文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>边缘安全加速平台 EO>Pages>框架指南>全栈>TanStack Start

TanStack Start

最近更新时间：2026-02-06 11:29:52

我的收藏

本页目录：

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 连接部署
集成好适配器后，将项目提交到 GitHub 或 GitLab，然后使用 Git 连接部署。
CLI 部署
安装 Pages 的脚手架工具（参考 EdgeOne CLI），配置完成后使用命令部署：
edgeone pages deploy
注意：
当前适配器暂不支持与 Nitro 插件同时使用。如需使用 Nitro，请等待 EdgeOne Pages 官方 preset 发布。

服务端渲染 (SSR)

TanStack Start 默认启用 SSR。通过 loader 函数在服务端获取数据。
// app/routes/posts.$postId.tsx
import { 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.tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({
  // Static data pre-rendered at build time
  loader: () => ({
    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.ts
import { 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 server
    const 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 awaiting
  loader: () => ({
    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>
  );
}

更多资源

TanStack Start 官方文档
TanStack Router 官方文档


中国站
目录