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 93004/2/25, 9:42 AM

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

9
User 93004/2/25, 9:42 AM

hello Jamie; how's the weather in SF?

5
User 57453/28/25, 2:54 PM

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

8
User 84963/28/25, 1:49 AM

Hi Emma- how's the weather in SF?

9
User 91223/27/25, 10:10 AM

hey Emma! Could you let the customer know we've fixed their issue?

9
User 9193/25/25, 3:42 PM

hey Nipunn! I'll be late to make the meeting tomorrow morning

1
User 1262/22/25, 2:41 AM

Hi Nipunn, how's the weather in SF?

1
User 1262/22/25, 2:41 AM

hello Nipunn! I'll be late to make the meeting tomorrow morning

1
User 1262/22/25, 2:41 AM

hi Jamie! Could you let the customer know we've fixed their issue?

8
User 82272/19/25, 3:29 PM

hey James- I'll be late to make the meeting tomorrow morning

7
User 78172/18/25, 11:20 AM

hey Emma; Could you let the customer know we've fixed their issue?

7
User 78172/18/25, 11:19 AM

Hi James... how was your weekend?

7
User 78172/18/25, 11:19 AM

hello Emma! Could you let the customer know we've fixed their issue?

6
User 62212/18/24, 9:25 PM

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

1
User 197012/1/24, 12:32 PM

hello Nipunn! Could you let the customer know we've fixed their issue?

9
User 924411/28/24, 11:37 PM

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

7
User 773911/17/24, 7:19 AM

hey James; I'll be late to make the meeting tomorrow morning

3
User 339111/17/24, 3:08 AM

hey Emma- how was your weekend?

4
User 426611/14/24, 10:46 AM

hello Emma! how was your weekend?

4
User 426611/14/24, 10:46 AM

hi Nipunn... Could you let the customer know we've fixed their issue?

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 } = useSuspenseQuery(
9      convexQuery(api.messages.list, {})
10    );
11  },
12})

Learn More

Tanner's An Early Glimpse of TanStack Start video

TanStack Router Preloading Guide