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().

3
User 36787/17/25, 7:22 AM

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

6
User 6987/16/25, 7:46 AM

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

4
User 4537/16/25, 7:46 AM

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

9
User 9237/16/25, 7:46 AM

hi Jamie; how was your weekend?

9
User 9657/16/25, 7:46 AM

hello James... how was your weekend?

7
User 7287/16/25, 7:46 AM

Hi Jamie! how's the weather in SF?

1
User 1247/16/25, 7:46 AM

Hi James; how was your weekend?

9
User 967/16/25, 7:46 AM

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

2
User 2217/16/25, 7:46 AM

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

8
User 8507/16/25, 7:46 AM

hi Jamie... how was your weekend?

7
User 7917/16/25, 7:46 AM

hello Nipunn; how's the weather in SF?

6
User 6247/16/25, 7:46 AM

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

6
User 647/16/25, 7:46 AM

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

9
User 9827/16/25, 7:46 AM

hello Emma, how's the weather in SF?

4
User 4037/16/25, 7:46 AM

hi Nipunn... how's the weather in SF?

6
User 6957/16/25, 7:46 AM

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

7
User 7337/16/25, 7:46 AM

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

2
User 2847/16/25, 7:46 AM

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

6
User 6217/16/25, 7:46 AM

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

5
User 5567/16/25, 7:46 AM

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

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