Convex with TanStack Start

Server-Side Rendering and Live Queries

TanStack Start routes render on the server for the first pageload of a browsing session. Neither the React Query nor standard Convex useQuery() hooks kick off requests for this data during this initial SSR pass, but the React Query hook useSuspenseQuery() does. The React Query client is then serialized with whatever data was loaded to make it available in the browser at hydration time. This reduces rendering on the server and updating on the client from two steps to one step: isomorphic data fetching with a single hook.

Try reloading this page to see the difference between useSuspenseQuery() and useQuery().

6
User 69311/21/26, 5:22 AM

hi Nipunn; how was your weekend?

6
User 69311/21/26, 5:22 AM

Hi Nipunn, how's the weather in SF?

6
User 69311/21/26, 5:22 AM

hey James, how was your weekend?

9
User 94161/20/26, 12:03 PM

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

8
User 8531/16/26, 7:06 PM

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

6
User 6901/16/26, 7:06 PM

hi James... I'll be late to make the meeting tomorrow morning

3
User 3301/16/26, 7:06 PM

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

4
User 4521/16/26, 7:06 PM

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

2
User 251/16/26, 7:06 PM

hello Emma... what's your favorite ice cream place?

2
User 291/16/26, 7:06 PM

hello Emma, what's your favorite ice cream place?

1
User 1961/16/26, 7:06 PM

hi James, I'll be late to make the meeting tomorrow morning

7
User 7251/16/26, 7:06 PM

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

6
User 6351/16/26, 7:06 PM

hey Nipunn- how's the weather in SF?

2
User 2701/16/26, 7:06 PM

hi Nipunn, how's the weather in SF?

3
User 3471/16/26, 7:06 PM

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

8
User 8891/16/26, 7:06 PM

Hi Emma! how's the weather in SF?

6
User 6211/16/26, 7:06 PM

Hi Nipunn, I'll be late to make the meeting tomorrow morning

9
User 9611/16/26, 7:06 PM

hi Jamie, how was your weekend?

1
User 1321/16/26, 7:06 PM

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

4
User 4571/16/26, 7:06 PM

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

1const { data } = useSuspenseQuery(convexQuery(
2  api.messages.listMessages,
3  { channel: "chatty" }
4))
1const { data, isPending } = useQuery(convexQuery(
2  api.messages.listMessages,
3  { channel: "chatty" }
4))

On the browser these queries resume their subscriptions which you can see by .

Another way to opt into server-side data loading is to load the query in a loader.

Learn More

TanStack Start SSR Guide