开发体验变重
热重载速度慢
App Router 心智负担高
部署到 Cloudflare 不够原生
Server Actions 更偏 Web 内部，不适合多端 API

TanStack Start
TanStack Server Functions
TanStack Server Routes
Hono
Hono RPC
oRPC

TanStack Start + Hono + oRPC

一个人长期维护
快速做 MVP
部署到 Cloudflare
代码结构简单
AI 容易理解和修改
未来可能支持 Web、小程序、App、Tauri、AI Agent
不想被框架复杂性拖死

内容站
SEO 站
标准 SaaS
Vercel-first 项目
需要大量模板和生态的项目
团队协作和招聘友好的项目

交互型 Web App
Dashboard
AI 工具站
个人产品
Cloudflare-first 应用
快速 MVP

Webhook、上传、AI Streaming、第三方回调都要 Hono

Server Functions
Server Routes

页面内部表单提交
Dashboard CRUD
读取当前用户数据
保存设置
Web App 内部操作

公共 API
跨域 API
小程序/App/第三方直接调用

Stripe webhook
微信支付回调
文件上传
AI Streaming / SSE
第三方 OAuth callback
健康检查
固定 URL endpoint

TanStack Start + Server Functions + Server Routes

独立 API 服务
REST API
Webhook 服务
公共接口
多端共用后端
Cloudflare Worker API
中间件体系

输入输出类型安全
业务化 API 调用
更适合多端
更适合公共 API
更适合 OpenAPI / API 文档

await client.posts.update({
  id,
  title,
  content,
})

await fetch('/api/posts/post_123', {
  method: 'PUT',
  body: JSON.stringify({ title, content }),
})

小项目 / 内部调用：Hono RPC 更轻
长期多端 / API 合约：oRPC 更合适

PUT /api/posts/:id
POST /rpc/posts.update

app.put('/api/posts/:id', async (c) => {
  return c.json(await updatePost(input))
})

posts: {
  update: os
    .input(UpdatePostInput)
    .output(PostOutput)
    .handler(({ input }) => updatePost(input))
}

Hono = HTTP 容器 / Middleware / 特殊 endpoint
oRPC = 多端核心业务 API

Hono:
  GET  /health
  POST /webhooks/stripe
  POST /webhooks/wechat-pay
  POST /upload
  GET  /ai/stream
  /rpc/* -> oRPC

oRPC:
  posts.create
  posts.update
  users.me
  orders.create
  events.join

后端用 oRPC 定义 API 合约
导出 OpenAPI / HTTP endpoint
小程序端用 wx.request 调用
必要时根据 OpenAPI 生成类型

schema = 输入输出结构
service = 真正业务逻辑
rpc = 把业务逻辑暴露为 API

// schemas/post.ts
export const UpdatePostInputSchema = z.object({
  id: z.string(),
  title: z.string().min(1),
  content: z.string().min(1),
})

export type UpdatePostInput = z.infer<typeof UpdatePostInputSchema>

// services/posts.ts
export async function updatePost(input: UpdatePostInput) {
  return db.posts.update({
    where: { id: input.id },
    data: {
      title: input.title,
      content: input.content,
    },
  })
}

// rpc/posts.ts
export const postsRouter = {
  update: os
    .input(UpdatePostInputSchema)
    .handler(({ input }) => updatePost(input)),
}

update: mutation(UpdatePostInputSchema, PostSchema, updatePost)

// server：定义 server function
import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'

const CreatePostSchema = z.object({
  title: z.string().min(1),
  content: z.string().min(1),
})

export const createPost = createServerFn({ method: 'POST' })
  .validator((data) => CreatePostSchema.parse(data))
  .handler(async ({ data }) => {
    const post = await insertPost(data)
    return post
  })

// client：页面中直接调用
const post = await createPost({ data: { title, content } })

// server：定义 Hono API
import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'

const app = new Hono()

app.post('/api/posts', zValidator('json', CreatePostSchema), async (c) => {
  const input = c.req.valid('json')
  const post = await insertPost(input)
  return c.json(post)
})

// client：前端 fetch 调用
const res = await fetch('/api/posts', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ title, content }),
})
const post = await res.json()

// shared schema
const CreatePostSchema = z.object({
  title: z.string().min(1),
  content: z.string().min(1),
})

const PostSchema = z.object({
  id: z.string(),
  title: z.string(),
  content: z.string(),
  createdAt: z.string(),
})

// server：定义 oRPC router 并挂到 Hono
import { os } from '@orpc/server'

export const postsRouter = {
  create: os
    .input(CreatePostSchema)
    .output(PostSchema)
    .handler(async ({ input }) => insertPost(input)),
}

export const appRouter = { posts: postsRouter }

// server：挂到 Hono
import { RPCHandler } from '@orpc/server/fetch'

const handler = new RPCHandler(appRouter)
app.use('/rpc/*', async (c, next) => {
  const { matched, response } = await handler.handle(c.req.raw, {
    prefix: '/rpc',
    context: {},
  })
  if (matched) return response
  await next()
})

// client：创建 oRPC client
import { createORPCClient } from '@orpc/client'
import { RPCLink } from '@orpc/client/fetch'

const link = new RPCLink({ url: '/rpc' })
export const client: RouterClient<AppRouter> = createORPCClient(link)

// client：页面调用
const post = await client.posts.create({ title, content })

products/01mvp/apps/web
  TanStack Start
  TanStack Router
  React
  Tailwind / shadcn

server
  Hono
  middleware
  auth
  webhook
  api boundary

rpc
  oRPC router
  schemas
  procedures
  client

db
  Drizzle
  D1 / Postgres

Web 页面
  ↓
TanStack Start
  ↓
页面私有逻辑：Server Function
  ↓
多端业务逻辑：oRPC Client
  ↓
Hono /rpc/*
  ↓
oRPC Router
  ↓
Drizzle / D1 / Postgres

TanStack Start
Server Functions
Server Routes
Drizzle
D1 / Postgres
Better Auth
Tailwind / shadcn
Cloudflare

products/01mvp/apps/web        TanStack Start
apps/server     Hono
products/01mvp/packages/api    oRPC
products/01mvp/packages/db     Drizzle
products/01mvp/packages/auth   Better Auth
packages/schema Zod / Valibot

TanStack Start 一定比 Next.js 好
Hono 一定要用
oRPC 一定要上

只有 Web：不要急着上 Hono / oRPC
需要 HTTP endpoint：先用 Server Routes
需要独立 API：再用 Hono
需要多端 API 合约：再用 oRPC
同一个业务 API 不要 Hono REST 和 oRPC 写两遍
业务逻辑只写在 service，一切 API 层都只是暴露方式