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

8
User 882/21/26, 1:11 AM

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

4
User 4342/21/26, 1:11 AM

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

6
User 6192/21/26, 1:11 AM

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

2
User 2892/21/26, 1:11 AM

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

8
User 8972/21/26, 1:11 AM

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

3
User 3472/21/26, 1:11 AM

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

5
User 5232/21/26, 1:11 AM

hey Emma... how was your weekend?

2
User 2132/21/26, 1:11 AM

hey James! how was your weekend?

6
User 6302/21/26, 1:11 AM

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

2
User 2682/21/26, 1:11 AM

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

8
User 82002/21/26, 1:10 AM

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

2
User 27042/19/26, 9:37 AM

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

2
User 27042/19/26, 9:36 AM

Hi Emma; how was your weekend?

4
User 48792/19/26, 9:36 AM

hi Jamie! how was your weekend?

5
User 5412/18/26, 2:46 AM

hey Jamie, Could you let the customer know we've fixed their issue?

2
User 2422/18/26, 2:46 AM

hey Emma... how was your weekend?

2
User 2132/18/26, 2:46 AM

hello Emma; how's the weather in SF?

5
User 5012/18/26, 2:46 AM

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

5
User 5182/18/26, 2:46 AM

hi Nipunn- what's your favorite ice cream place?

6
User 6722/18/26, 2:46 AM

Hi Nipunn; 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