Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tanstack/router/llms.txt

Use this file to discover all available pages before exploring further.

TanStack Solid Start provides SSR, streaming, server functions, API routes, and bundling powered by TanStack Router and Vite, ready to deploy to your favorite hosting provider.

​
Installation

Install the Solid Start package: 
npm install @tanstack/solid-start

​
Vite Plugin Setup

Configure the TanStack Start Vite plugin in your vite.config.ts: 
import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [
    tanstackStart({
      srcDirectory: 'src',
    }),
    solid(),
  ],
})

​
Router Setup

Create your router instance in src/router.tsx: 
import { createRouter } from '@tanstack/solid-router'
import { routeTree } from './routeTree.gen'

export function getRouter() {
  const router = createRouter({
    routeTree,
    defaultPreload: 'intent',
  })
  return router
}

​
Server Functions

TanStack Solid Start provides server functions for executing code on the server with full type safety.

​
Creating Server Functions

Use createServerFn to define server-side logic: 
import { createServerFn } from '@tanstack/solid-start'

const getUser = createServerFn()
  .handler(async () => {
    // This code runs only on the server
    const user = await db.user.findFirst()
    return user
  })

​
Using Server Functions in Components

Call server functions using the useServerFn hook: 
import { useServerFn } from '@tanstack/solid-start'

function UserProfile() {
  const fetchUser = useServerFn(getUser)
  
  const handleClick = async () => {
    const user = await fetchUser()
    console.log(user)
  }
  
  return <button onClick={handleClick}>Load User</button>
}
The useServerFn hook automatically handles:
  • Type-safe function calls
  • Redirect responses from server functions
  • Integration with TanStack Router navigation

​
Middleware

Add middleware to server functions for shared logic like authentication, logging, or data validation.

​
Creating Middleware

import { createMiddleware } from '@tanstack/solid-start'

const authMiddleware = createMiddleware()
  .server(async ({ next, context }) => {
    const user = await getSessionUser()
    
    if (!user) {
      throw new Error('Unauthorized')
    }
    
    return next({
      context: {
        user,
      },
    })
  })

​
Using Middleware in Server Functions

const protectedAction = createServerFn()
  .middleware([authMiddleware])
  .handler(async ({ context }) => {
    // context.user is typed and available
    return { userId: context.user.id }
  })

​
Input Validation

Validate server function inputs with validators like Zod, Valibot, or ArkType: 
import { createServerFn } from '@tanstack/solid-start'
import { z } from 'zod'

const updateUser = createServerFn()
  .inputValidator(z.object({
    name: z.string(),
    email: z.string().email(),
  }))
  .handler(async ({ data }) => {
    // data is fully typed based on the validator
    await db.user.update({
      where: { id: data.id },
      data: { name: data.name, email: data.email },
    })
  })

// Call with type-safe data
await updateUser({ 
  data: { 
    name: 'John', 
    email: 'john@example.com' 
  } 
})

​
HTTP Methods

Server functions support both GET and POST methods: 
// GET request (default)
const getData = createServerFn().handler(async () => {
  return { data: 'value' }
})

// POST request
const postData = createServerFn({ method: 'POST' })
  .handler(async ({ data }) => {
    return { success: true }
  })

​
Client and Server Contexts

Share context between client and server: 
const contextMiddleware = createMiddleware()
  .client(async ({ next }) => {
    return next({
      sendContext: {
        clientTimestamp: Date.now(),
      },
    })
  })
  .server(async ({ context, next }) => {
    console.log('Client timestamp:', context.clientTimestamp)
    return next()
  })

​
Package Exports

TanStack Solid Start provides several package exports:
  • @tanstack/solid-start - Main client exports
  • @tanstack/solid-start/server - Server-only utilities
  • @tanstack/solid-start/client - Client-only utilities
  • @tanstack/solid-start/plugin/vite - Vite plugin
  • @tanstack/solid-start/server-rpc - Server RPC utilities
  • @tanstack/solid-start/client-rpc - Client RPC utilities
  • @tanstack/solid-start/ssr-rpc - SSR RPC utilities

​
Solid-Specific Features

​
Reactive Primitives

Leverage Solid’s reactive primitives with server functions: 
import { createSignal, createResource } from 'solid-js'
import { createServerFn } from '@tanstack/solid-start'

const fetchData = createServerFn().handler(async () => {
  return await db.getData()
})

function DataComponent() {
  const [data] = createResource(fetchData)
  
  return (
    <div>
      <Show when={!data.loading} fallback={<div>Loading...</div>}>
        <div>{data()?.value}</div>
      </Show>
    </div>
  )
}

​
Streaming with Suspense

Use Solid’s Suspense for streaming SSR: 
import { Suspense } from 'solid-js'

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncContent />
    </Suspense>
  )
}

​
Server-Side Rendering

Solid Start provides optimized SSR out of the box: 
function ServerRenderedPage() {
  const [data] = createResource(() => fetchServerData())
  
  return (
    <div>
      <h1>Server Rendered Content</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <DataDisplay data={data()} />
      </Suspense>
    </div>
  )
}

​
TypeScript Configuration

Ensure your tsconfig.json includes: 
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "strict": true
  }
}

​
Peer Dependencies

TanStack Solid Start requires:
  • Solid.js >= 1.0.0
  • Vite >= 7.0.0

​
Next Steps

Server Functions

Learn more about creating and using server functions

Routing

Explore TanStack Router features

Examples

Browse Solid Start examples

API Reference

View the complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us