TanStack Start 03 実行モデルと Server Functions

import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'
 
// GET(既定)
export const getServerTime = createServerFn().handler(async () => {
  return new Date().toISOString()
})
 
// POST + 入力検証
export const createUser = createServerFn({ method: 'POST' })
  .validator(z.object({ name: z.string().min(1), age: z.number().min(0) }))
  .handler(async ({ data }) => {
    // data は検証済み・型付き
    return db.users.create(data)
  })
 
// 呼び出し(引数は data で渡す)
await createUser({ data: { name: '山田', age: 30 } })

export const Route = createFileRoute('/posts')({
  loader: () => getPosts(),
})
function PostList() {
  const fetchPosts = useServerFn(getPosts)
  const { data } = useQuery({ queryKey: ['posts'], queryFn: () => fetchPosts() })
}

src/utils/
├── users.functions.ts   # createServerFn のラッパー(どこから import してもOK)
├── users.server.ts      # DB クエリなどサーバー専用(handler の中でだけ使う)
└── schemas.ts           # 検証スキーマ・型(クライアントでも安全)

import { redirect, notFound } from '@tanstack/react-router'
export const requireAuth = createServerFn().handler(async () => {
  const user = await getCurrentUser()
  if (!user) throw redirect({ to: '/login' })
  return user
})
export const getPost = createServerFn()
  .validator((d: { id: string }) => d)
  .handler(async ({ data }) => {
    const post = await db.findPost(data.id)
    if (!post) throw notFound()
    return post
  })

import { getRequestHeader, setResponseHeaders, setResponseStatus } from '@tanstack/react-start/server'

// ❌ モジュールのトップで process.env を読む
const apiKey = process.env.SECRET_KEY
//   → クライアントに埋め込まれる危険 + Cloudflare Workers ではリクエスト時まで env がなく undefined
 
// ✅ サーバー専用関数か handler の中で読む
const getKey = createServerOnlyFn(() => process.env.SECRET_KEY)

// ❌ loader はサーバー専用だと思い込む(ブラウザでも動く)
loader: () => fetch(`/api/users?key=${process.env.SECRET}`)
// ✅ Server Function 経由
loader: () => getUsersSecurely()

// ❌ サーバーとブラウザで結果が変わる描画 → ハイドレーションエラー
<div>{new Date().toLocaleString()}</div>
// ✅ useEffect でブラウザ側だけ、または useHydrated / ClientOnly