// TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate when building full-stack apps with TanStack Start.
| name | tanstack-start-best-practices |
| description | TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate when building full-stack apps with TanStack Start. |
Comprehensive guidelines for implementing TanStack Start patterns in full-stack React applications. These rules cover server functions, middleware, SSR, authentication, and deployment.
| 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 |
sf-)sf-create-server-fn — Use createServerFn for server-side logicsf-input-validation — Always validate server function inputssf-method-selection — Choose appropriate HTTP methodsf-error-handling — Handle errors in server functionssf-response-headers — Customize response headers when neededsec-)sec-validate-inputs — Validate all user inputs with schemassec-auth-middleware — Protect routes with auth middlewaresec-sensitive-data — Keep secrets server-side onlysec-csrf-protection — Implement CSRF protection for mutationsmw-)mw-request-middleware — Use request middleware for cross-cutting concernsmw-function-middleware — Use function middleware for server functionsmw-context-flow — Properly pass context through middlewaremw-composability — Compose middleware effectivelyauth-)auth-session-management — Implement secure session handlingauth-route-protection — Protect routes with beforeLoadauth-server-functions — Verify auth in server functionsauth-cookie-security — Configure secure cookie settingsapi-)api-routes — Create API routes for external consumersssr-)ssr-data-loading — Load data appropriately for SSRssr-hydration-safety — Prevent hydration mismatchesssr-streaming — Implement streaming SSR for faster TTFBssr-selective — Apply selective SSR when beneficialssr-prerender — Configure static prerendering and ISRenv-)env-functions — Use environment functions for configurationerr-)err-server-errors — Handle server function errorserr-redirects — Use redirects appropriatelyerr-not-found — Handle not-found scenariosfile-)file-separation — Separate server and client codefile-functions-file — Use .functions.ts patternfile-shared-validation — Share validation schemasdeploy-)deploy-env-config — Configure environment variablesdeploy-adapters — Choose appropriate deployment adapterEach rule file in the rules/ directory contains:
See individual rule files in rules/ directory for detailed guidance and code examples.
Best practices for integrating TanStack Query with TanStack Router and TanStack Start. Patterns for full-stack data flow, SSR, and caching coordination.
TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.