React Start

npm install @tanstack/react-start

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import viteReact from '@vitejs/plugin-react'

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

import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

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

import { createServerFn } from '@tanstack/react-start'

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

import { useServerFn } from '@tanstack/react-start'

function UserProfile() {
  const fetchUser = useServerFn(getUser)
  
  const handleClick = async () => {
    const user = await fetchUser()
    console.log(user)
  }
  
  return <button onClick={handleClick}>Load User</button>
}

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

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

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

import { createServerFn } from '@tanstack/react-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' 
  } 
})

// GET request (default)
const getData = createServerFn().handler(async () => {
  return { data: 'value' }
})

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

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

// Server Component
export default async function UserList() {
  const users = await getUsers()
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

import { Suspense } from 'react'

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

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "strict": true
  }
}