Next.js 16 vs TanStack Start 对比

// Next.js 16 App Router — 服务端组件 + Server Action
// app/products/[id]/page.tsx
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });

  async function addToCart(formData: FormData) {
    "use server";
    const quantity = Number(formData.get("quantity"));
    await db.cartItem.create({
      data: { productId: id, quantity },
    });
    revalidatePath("/cart");
  }

  if (!product) return <p>Ürün bulunamadı.</p>;

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.price} TL</p>
      <form action={addToCart}>
        <input type="number" name="quantity" defaultValue={1} min={1} />
        <button type="submit">Sepete Ekle</button>
      </form>
    </main>
  );
}

export const revalidate = 3600; // ISR：每小时重新验证一次

// TanStack Start — 类型安全的路由 + server function
// src/routes/products.$id.tsx
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { db } from "~/lib/db";

const getProduct = createServerFn({ method: "GET" })
  .validator((id: string) => id)
  .handler(async ({ data: id }) => {
    return db.product.findUnique({ where: { id } });
  });

const addToCart = createServerFn({ method: "POST" })
  .validator((input: { productId: string; quantity: number }) => input)
  .handler(async ({ data }) => {
    await db.cartItem.create({ data });
    return { ok: true };
  });

export const Route = createFileRoute("/products/$id")({
  loader: ({ params }) => getProduct({ data: params.id }),
  component: ProductPage,
});

function ProductPage() {
  const product = Route.useLoaderData();
  if (!product) return <p>Ürün bulunamadı.</p>;

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.price} TL</p>
      <button
        onClick={() => addToCart({ data: { productId: product.id, quantity: 1 } })}
      >
        Sepete Ekle
      </button>
    </main>
  );
}