TanStack Start Best Practices
Comprehensive guidelines for implementing TanStack Start patterns in full-stack React applications. These rules cover server functions, middleware, SSR, authentication, and deployment.
When to Apply Creating server functions for data mutations Setting up middleware for auth/logging Configuring SSR and hydration Implementing authentication flows Handling errors across client/server boundary Organizing full-stack code Deploying to various platforms Rule Categories by Priority Priority Category Rules Impact CRITICAL Server Functions 5 rules Core data mutation patterns CRITICAL Security 4 rules Prevents vulnerabilities HIGH Middleware 4 rules Request/response handling HIGH Authentication 4 rules Secure user sessions MEDIUM API Routes 1 rule External endpoint patterns MEDIUM SSR 6 rules Server rendering patterns MEDIUM Error Handling 3 rules Graceful failure handling MEDIUM Environment 1 rule Configuration management LOW File Organization 3 rules Maintainable code structure LOW Deployment 2 rules Production readiness Quick Reference Server Functions (Prefix: sf-) sf-create-server-fn — Use createServerFn for server-side logic sf-input-validation — Always validate server function inputs sf-method-selection — Choose appropriate HTTP method sf-error-handling — Handle errors in server functions sf-response-headers — Customize response headers when needed Security (Prefix: sec-) sec-validate-inputs — Validate all user inputs with schemas sec-auth-middleware — Protect routes with auth middleware sec-sensitive-data — Keep secrets server-side only sec-csrf-protection — Implement CSRF protection for mutations Middleware (Prefix: mw-) mw-request-middleware — Use request middleware for cross-cutting concerns mw-function-middleware — Use function middleware for server functions mw-context-flow — Properly pass context through middleware mw-composability — Compose middleware effectively Authentication (Prefix: auth-) auth-session-management — Implement secure session handling auth-route-protection — Protect routes with beforeLoad auth-server-functions — Verify auth in server functions auth-cookie-security — Configure secure cookie settings API Routes (Prefix: api-) api-routes — Create API routes for external consumers SSR (Prefix: ssr-) ssr-data-loading — Load data appropriately for SSR ssr-hydration-safety — Prevent hydration mismatches ssr-streaming — Implement streaming SSR for faster TTFB ssr-selective — Apply selective SSR when beneficial ssr-prerender — Configure static prerendering and ISR Environment (Prefix: env-) env-functions — Use environment functions for configuration Error Handling (Prefix: err-) err-server-errors — Handle server function errors err-redirects — Use redirects appropriately err-not-found — Handle not-found scenarios File Organization (Prefix: file-) file-separation — Separate server and client code file-functions-file — Use .functions.ts pattern file-shared-validation — Share validation schemas Deployment (Prefix: deploy-) deploy-env-config — Configure environment variables deploy-adapters — Choose appropriate deployment adapter How to Use
Each rule file in the rules/ directory contains:
Explanation — Why this pattern matters Bad Example — Anti-pattern to avoid Good Example — Recommended implementation Context — When to apply or skip this rule Full Reference
See individual rule files in rules/ directory for detailed guidance and code examples.