Convex with TanStack Start

Loaders and Prefetching

TanStack Start routes can have isomorphic loader functions that run on the server for the initial pageload and on the client for subsequent client-side navigations.

These three links navigate to subpages that show chat messages from different channels. Notice how client navigations between these pages work differently.

Awaiting ensureQueryData will block rendering of the page until that data is available and calling prefetchQuery will start the request but not block. Loaders also run during prefetching, triggered by the cursor mousing onto a link in TanStack Start by default.

When to use a loader

Loading a query in a loader ejects from the convenience of component-local reasoning through useSuspenseQuery where a component fetching its own data to the cold reality of fast page loads when you need it.

9
User 983911/26/25, 9:13 AM

Hi Jamie- Could you let the customer know we've fixed their issue?

3
User 367311/25/25, 1:19 PM

hello Emma; how was your weekend?

9
User 961911/25/25, 9:50 AM

Hi Jamie... I'll be late to make the meeting tomorrow morning

4
User 445311/24/25, 5:10 AM

Hi Jamie, what's your favorite ice cream place?

4
User 445311/24/25, 5:10 AM

hi Jamie! I'll be late to make the meeting tomorrow morning

4
User 445311/24/25, 5:10 AM

hello Emma! how was your weekend?

4
User 445311/24/25, 5:10 AM

hi James; Could you let the customer know we've fixed their issue?

4
User 445311/24/25, 5:10 AM

hey Nipunn... how was your weekend?

4
User 445311/24/25, 5:10 AM

hi Nipunn! how was your weekend?

4
User 445311/24/25, 5:10 AM

hi Emma; how's the weather in SF?

4
User 445311/24/25, 5:10 AM

hello Jamie, I'll be late to make the meeting tomorrow morning

4
User 445311/24/25, 5:10 AM

hey James; how's the weather in SF?

4
User 445311/24/25, 5:10 AM

Hi Emma! I'll be late to make the meeting tomorrow morning

4
User 445311/24/25, 5:10 AM

hello James; Could you let the customer know we've fixed their issue?

4
User 445311/24/25, 5:10 AM

hey Nipunn, how was your weekend?

4
User 445311/24/25, 5:10 AM

hi James... what's your favorite ice cream place?

4
User 445311/24/25, 5:10 AM

hello Nipunn; what's your favorite ice cream place?

4
User 445311/24/25, 5:10 AM

hey Nipunn- Could you let the customer know we've fixed their issue?

4
User 445311/24/25, 5:10 AM

hi Emma, how's the weather in SF?

4
User 445311/24/25, 5:10 AM

hello Nipunn! how was your weekend?

1export const Route = createFileRoute('/loaders/ensure')({
2  loader: async (opts) => {
3    await opts.context.queryClient.ensureQueryData(
4      convexQuery(api.messages.list, {}),
5    );
6  },
7  component: () => {
8    const { data } = useQuery(
9      convexQuery(api.messages.list, {})
10    );
11  },
12})

Learn More

Tanner's An Early Glimpse of TanStack Start video

TanStack Router Preloading Guide