Kenhuang Academy
  • English

      • Quick Start

      This chapter connects a page route, loader, and server function.

      Create a Home Route

      import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: HomePage,
})

function HomePage() {
  return <main>Hello TanStack Start</main>
}

      Add a Loader

      export const Route = createFileRoute('/')({
  loader: async () => ({ message: 'Loaded during SSR or navigation' }),
  component: HomePage,
})

function HomePage() {
  const data = Route.useLoaderData()
  return <main>{data.message}</main>
}

      Add a Server Function

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

const getServerTime = createServerFn({ method: 'GET' }).handler(async () => {
  return { now: new Date().toISOString() }
})

export const Route = createFileRoute('/')({
  loader: async () => getServerTime(),
  component: HomePage,
})

      Server functions run on the server but can be called from loaders, hooks, event handlers, and other server functions.

      Next Steps