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.