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 8195/25/26, 2:22 AM

hi James... how was your weekend?

3
User 3135/25/26, 2:22 AM

hello Nipunn; how was your weekend?

8
User 8725/25/26, 2:22 AM

hello Jamie, how was your weekend?

8
User 8165/25/26, 2:22 AM

Hi Emma... how was your weekend?

1
User 1805/25/26, 2:22 AM

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

7
User 7725/25/26, 2:22 AM

Hi Nipunn- how's the weather in SF?

9
User 9395/25/26, 2:22 AM

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

7
User 7845/25/26, 2:22 AM

hi James- how's the weather in SF?

8
User 8525/25/26, 2:22 AM

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

2
User 2285/25/26, 2:22 AM

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

6
User 6485/24/26, 5:44 AM

Hi James- how's the weather in SF?

4
User 49235/14/26, 6:10 AM

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

8
User 85325/14/26, 6:10 AM

hello Emma! how's the weather in SF?

8
User 82155/14/26, 6:10 AM

hey Jamie, I'll be late to make the meeting tomorrow morning

8
User 85325/14/26, 6:10 AM

Hi Emma; how's the weather in SF?

9
User 97415/12/26, 7:24 AM

Hi Emma... how was your weekend?

7
User 79845/12/26, 7:24 AM

hi James- how's the weather in SF?

9
User 96135/6/26, 7:36 AM

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

6
User 68365/2/26, 5:55 AM

Hi Emma- how was your weekend?

4
User 48814/29/26, 6:43 PM

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