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 333910/15/25, 8:16 AM

hi Jamie- how was your weekend?

4
User 407510/13/25, 1:38 PM

hey Emma, how's the weather in SF?

6
User 677810/13/25, 1:14 PM

hey Nipunn- how was your weekend?

6
User 677810/13/25, 1:14 PM

Hi Nipunn; how was your weekend?

6
User 677810/13/25, 1:14 PM

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

5
User 53510/13/25, 1:07 PM

Hi Jamie; how's the weather in SF?

9
User 94810/13/25, 1:07 PM

hey Jamie... how's the weather in SF?

7
User 73410/13/25, 1:07 PM

hey Emma- what's your favorite ice cream place?

9
User 9210/13/25, 1:07 PM

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

1
User 16910/13/25, 1:07 PM

hi Jamie... how was your weekend?

2
User 27510/13/25, 1:07 PM

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

4
User 45110/13/25, 1:07 PM

hi Nipunn- how was your weekend?

1
User 14110/13/25, 1:07 PM

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

3
User 33910/13/25, 1:07 PM

hello Emma! how was your weekend?

8
User 89910/13/25, 1:07 PM

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

8
User 80410/13/25, 1:07 PM

hello Jamie; how's the weather in SF?

4
User 49310/13/25, 1:07 PM

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

3
User 38910/13/25, 1:07 PM

hi Jamie! how's the weather in SF?

9
User 94010/13/25, 1:07 PM

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

5
User 58210/13/25, 1:07 PM

hey James; what's your favorite ice cream place?

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