04. Cloudflare 全栈落地：Workers 是运行时，不只是部署按钮

TanStack Start 在 Cloudflare 上的重点不是“能部署”，而是 server functions 能直接进入 Workers 生态：bindings、D1、R2、KV、Queues、Workflows。

官方推荐路径

npm create cloudflare@latest -- my-tanstack-start-app --framework=tanstack-start
npm run dev
npm run deploy

已有项目则安装 Cloudflare Vite plugin 和 Wrangler，并把 Vite 的 SSR environment 接到 Workers runtime。

npm i -D @cloudflare/vite-plugin wrangler

// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    cloudflare({ viteEnvironment: { name: 'ssr' } }),
    tanstackStart(),
    react(),
  ],
})

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-tanstack-start-app",
  "compatibility_date": "2026-07-07",
  "compatibility_flags": ["nodejs_compat"],
  "main": "@tanstack/react-start/server-entry",
  "observability": { "enabled": true }
}

Bindings 的实践含义

Cloudflare 文档显示，TanStack Start server-side code 可以通过 cloudflare:workers 的 env 访问 bindings。

import { createServerFn } from '@tanstack/react-start'
import { env } from 'cloudflare:workers'

const getProfile = createServerFn().handler(async () => {
  const row = await env.DB.prepare('select * from profiles where id = ?')
    .bind('me')
    .first()
  return row
})

推荐架构切片

Cloudflare vs Vercel 的真实差异

• Vercel + Next：最快获得 Next 原生体验，尤其 RSC/image/font/preview 的默认路径。
• Cloudflare + TanStack：更接近 Web 标准 runtime + 显式架构 + 边缘平台资源绑定。
• 代价：TanStack Start 仍接近 v1/RC 生态，资料和模板少于 Next。别拿成熟生态当空气，它不是。

推荐原文

Cloudflare TanStack Start Guide 与 Cloudflare Vite Plugin。