TanStack Start

Why deploy TanStack Start on Render?

TanStack Start is a full-stack React framework powered by TanStack Router. It combines type-safe, file-based routing with server-side rendering, client hydration, and server functions in a single TypeScript application. This gives you SEO-friendly HTML and rich client-side interactions without requiring separate frontend and API projects.

This template uses a Render Blueprint to provision one native Node.js web service. Render installs the locked dependencies, Vite builds the client and server bundles, and the service launches the generated Nitro server. The same process serves your server-rendered routes, browser assets, and server functions, while a dedicated /health endpoint provides an application health check.

Because the deployment configuration is already captured in render.yaml, you do not need to configure a Dockerfile, database, persistent disk, or application secrets. Deploy the starter as-is, then replace the demonstration routes and connect authentication, databases, object storage, or other Render services as your application grows.

Architecture

TanStack Start, Nitro, server functions, and the generated client assets all run within the same Render web service. They are not separate infrastructure resources.

What you can build

This template provides a deployment-ready foundation for server-rendered React applications with typed routes and server-side logic. Use it for product websites, customer portals, interactive dashboards, internal tools, or full-stack SaaS applications that benefit from server-rendered HTML and fast client-side navigation.

The starter intentionally includes no persistence or authentication. You can add the database, identity provider, object storage, and other managed services that fit your application without first removing dependencies you do not need.

Key features

• Declarative Render Blueprint: Defines the service runtime, build command, start command, host binding, health check, and instance plan in render.yaml.
• Server-rendered React: Returns meaningful page HTML from the production server before React hydrates in the browser.
• Type-safe routing: Uses TanStack Router for typed client-side navigation and direct server-rendered route requests.
• Integrated server functions: Includes a working same-origin server function that returns data from the running Node.js process.
• Dedicated health check: Provides a dependency-free GET /health endpoint that returns 200 JSON with a no-store cache policy.
• Native Node.js deployment: Runs the generated Nitro server directly without requiring a Dockerfile or container configuration.
• No required secrets or database: Deploys without application environment variables, persistent storage, or a separate backend service.
• Free instance starting point: Configures the web service to use Render’s Free instance type by default.
• Security-conscious defaults: Preserves same-origin CSRF protection for server functions and prevents internal Error details from being exposed in responses.
• Tested production path: Includes formatting, type, production smoke, browser, accessibility, CSRF, error-boundary, and Blueprint validation checks.

Use cases

• Launch a server-rendered React and TypeScript application
• Build an SEO-friendly website with interactive client-side navigation
• Prototype full-stack features with server functions instead of a separate API service
• Create a dashboard or SaaS foundation before adding authentication and persistence
• Build an internal tool with frontend and server-side logic in one repository
• Use a tested reference implementation for deploying TanStack Start and Nitro on Render

What's included

Prerequisites

• A Render account with permission to create a web service in the target workspace
• A Git repository that Render can access if you plan to customize the starter

No database, API key, secret, or manually configured environment value is required. Render supplies the service port automatically, and the Blueprint configures the public host binding.

Next steps

1. Open the service URL provided by Render after the first deploy completes — you should see the TanStack Start on Render starter page.
2. Select Check the server — the result should show Response received and a timestamp generated by the running server.
3. Open How it works, then reload /about directly — the page should work through both client-side navigation and a fresh server-rendered request.
4. Open /health — the endpoint should return HTTP 200 with {"status":"ok"}.
5. Replace the demonstration routes and server function with your application, then add any authentication, database, or storage resources it requires.