边缘安全加速平台 EO TanStack Start

注意：目前 Makers 支持 TanStack Start 1.0+ 版本，可实现全栈部署。

一、核心特点

·类型安全路由：完整的 TypeScript 支持，路由参数和数据加载都具有类型推断。

·全栈框架：支持服务端渲染、API 路由和前后端一体化开发。

·文件式路由：基于文件系统的路由约定，自动生成路由树。

·数据加载：内置 loader 机制，支持服务端数据获取。

·流式渲染：支持 React 18 Suspense 和流式 SSR。

二、快速开始

你可以通过以下方式在 EdgeOne Makers 上部署 TanStack Start 项目：

·通过 Git 仓库导入 TanStack Start 项目

·从 Makers 的模板库选择 TanStack Start 模板

·使用 @edgeone/tanstack-start 框架适配器部署本地项目

了解 TanStack Start 在 Makers 的部署表现，可以点击下方的示例模板：

三、Makers 对 TanStack Start 的支持

四、在 Makers 部署 TanStack Start 项目

@edgeone/tanstack-start 是专为 Makers 平台设计的 Vite 插件，可自动将 TanStack Start 应用构建为 Makers 部署产物。结合 Makers 脚手架，实现 TanStack Start 项目的快速部署。适配器源代码已开源，欢迎访问 vite-adapter仓库查看源码、提交 Issue 或参与贡献。

要在 Makers 部署 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 部署

安装 Makers 的脚手架工具（参考 EdgeOne CLI），配置完成后使用命令部署：

edgeone makers deploy

注意：当前适配器暂不支持与 Nitro 插件同时使用。如需使用 Nitro，请等待 EdgeOne Makers 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 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.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 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 产品文档

·vite-adapter 代码仓库