How to fetch data in a TanStack Start / TanStack Router + TanStack Query page?

Hello everyone!

What's currently the best/recommended way in 2025–2026 to fetch data in a TanStack Start / TanStack Router + TanStack Query page?

I'm just a beginner learning how to get started with the Tank Stack environment, so please forgive any mistakes.

I'm currently doing this (which seems to be the most common pattern):

- Use

loader

loader

with

queryClient.ensureQueryData()

queryClient.ensureQueryData()

to prefetch on server
- Then in component:

useSuspenseQuery

useSuspenseQuery

with the same queryKey

Code example:

export const Route = createFileRoute('/demo')({
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData({
      queryKey: ['names'],
      queryFn: getNamesServerFn,
    })
  },
  pendingComponent: () => <FullScreenLoading />,
  pendingMs: 0,
  pendingMinMs: 300,
})

function Component() {
  const { data } = useSuspenseQuery({ queryKey: ['names'], queryFn: getNamesServerFn })
  // render data
}

export const Route = createFileRoute('/demo')({
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData({
      queryKey: ['names'],
      queryFn: getNamesServerFn,
    })
  },
  pendingComponent: () => <FullScreenLoading />,
  pendingMs: 0,
  pendingMinMs: 300,
})

function Component() {
  const { data } = useSuspenseQuery({ queryKey: ['names'], queryFn: getNamesServerFn })
  // render data
}

But here's the issue I'm facing:
When I fake a 5-second delay in the server function and directly hit the URL (or refresh the page), the page waits the full 5 seconds before rendering anything — and the pendingComponent doesn't show up immediately (or sometimes not at all, just blank screen for 5s).

const getNamesServer = createServerFn({ method: 'GET' }).handler(async () => {
  await new Promise((resolve) => setTimeout(resolve, 5000))

  const res = await fetch('http://localhost:3000/demo/api/names').then(
    (res) => res.json() as Promise<string[]>,
  )
  return res
})

const getNamesServer = createServerFn({ method: 'GET' }).handler(async () => {
  await new Promise((resolve) => setTimeout(resolve, 5000))

  const res = await fetch('http://localhost:3000/demo/api/names').then(
    (res) => res.json() as Promise<string[]>,
  )
  return res
})

Is this expected behavior?
Or is there a better pattern to:

Have data prefetched on server (no flicker on navigation)
Show a loading screen immediately when direct URL access / refresh
Still use full power of TanStack Query (Suspense, cache, background refetch, etc.)

TanStack•2mo ago•

4 replies

technological-jade

How to fetch data in a TanStack Start / TanStack Router + TanStack Query page?

loader

loader

with

queryClient.ensureQueryData()

queryClient.ensureQueryData()

to prefetch on server
- Then in component:

useSuspenseQuery

useSuspenseQuery

with the same queryKey

Code example:

export const Route = createFileRoute('/demo')({
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData({
      queryKey: ['names'],
      queryFn: getNamesServerFn,
    })
  },
  pendingComponent: () => <FullScreenLoading />,
  pendingMs: 0,
  pendingMinMs: 300,
})

function Component() {
  const { data } = useSuspenseQuery({ queryKey: ['names'], queryFn: getNamesServerFn })
  // render data
}

export const Route = createFileRoute('/demo')({
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData({
      queryKey: ['names'],
      queryFn: getNamesServerFn,
    })
  },
  pendingComponent: () => <FullScreenLoading />,
  pendingMs: 0,
  pendingMinMs: 300,
})

function Component() {
  const { data } = useSuspenseQuery({ queryKey: ['names'], queryFn: getNamesServerFn })
  // render data
}

const getNamesServer = createServerFn({ method: 'GET' }).handler(async () => {
  await new Promise((resolve) => setTimeout(resolve, 5000))

  const res = await fetch('http://localhost:3000/demo/api/names').then(
    (res) => res.json() as Promise<string[]>,
  )
  return res
})

const getNamesServer = createServerFn({ method: 'GET' }).handler(async () => {
  await new Promise((resolve) => setTimeout(resolve, 5000))

  const res = await fetch('http://localhost:3000/demo/api/names').then(
    (res) => res.json() as Promise<string[]>,
  )
  return res
})

How to fetch data in a TanStack Start / TanStack Router + TanStack Query page?

Similar Threads

How to fetch data in a TanStack Start / TanStack Router + TanStack Query page?

Similar Threads

Similar Threads

Similar Threads