アーキテクチャ
フレームワークの内部設計:1 つの React コードベース、エッジファーストなインフラ。
リクエストのライフサイクル
すべてのリクエストはエッジ上の 5 つのステージを流れます。
- クライアントブラウザ上の React アプリReact 19TanStack RouterParaglide
- エッジCloudflare Worker が SSR を実行Cloudflare WorkersSSRStatic assets
- サーバー関数型安全な RPC、Zod + ミドルウェアcreateServerFnZodMiddleware
- プロバイダー認証・決済・メール・AI 呼び出しBetter AuthStripe / CreemResend / CF EmailAI SDK
- データとレスポンスD1 クエリ、R2 ファイル、ストリーミング HTMLD1 + DrizzleR2Streamed HTML
- AI SaaS Starter
- フロントエンド
- React 19
- TanStack Start / Router
- Tailwind CSS v4
- Paraglide i18n (5 locales)
- shadcn/ui + Base UI
- 認証
- Better Auth
- Google OAuth
- Email + password
- API keys
- Cloudflare Turnstile
- 決済
- Stripe
- Creem
- PayPal NCP
- Alipay page.pay
- Webhooks ×4
- AI
- Vercel AI SDK
- DeepSeek (streaming chat)
- Workers AI
- fal.ai
- Credits + funding cascade
- データ
- Cloudflare D1
- Drizzle ORM
- R2 storage
- In-app messaging
- Activity ledger
- メールと通知
- Resend
- Cloudflare Email Service
- React Email templates
- Discord / Feishu alerts
- デプロイ
- Cloudflare Workers
- wrangler deploy
- D1 migrations
- Secrets via wrangler
- Playwright E2E