Kenhuang Academy
  • English

      • Data Loading

      TanStack Start uses TanStack Router loaders. Routes define data needs and components consume them through Route APIs.

      Basic Loader

      export const Route = createFileRoute('/posts')({
  loader: async () => fetchPosts(),
  component: PostsPage,
})

function PostsPage() {
  const posts = Route.useLoaderData()
  return posts.map((post) => <a key={post.id}>{post.title}</a>)
}

      Use loaders for route-critical data needed for first render, URL-driven data, and SSR.

      Search Params and Loader Deps

      export const Route = createFileRoute('/posts')({
  validateSearch: (search) => ({ page: Number(search.page ?? 1) }),
  loaderDeps: ({ search }) => ({ page: search.page }),
  loader: ({ deps }) => fetchPosts({ page: deps.page }),
})

      beforeLoad

      export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context }) => {
    if (!context.user) throw redirect({ to: '/login' })
  },
})

      Next Steps