TanStack Start

npm install @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
  ],
});

edgeone pages deploy

// 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>
  );
}

// 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>
  );
}

// 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;
  });

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>
  );
}