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

1
User 124412/11/24, 6:22 PM

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

1
User 124412/11/24, 6:22 PM

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

9
User 928012/11/24, 6:22 PM

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

9
User 928012/11/24, 6:22 PM

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

1
User 124412/11/24, 6:21 PM

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

1
User 124412/11/24, 6:21 PM

hello James... how's the weather in SF?

9
User 91312/1/24, 12:32 PM

hello James! how was your weekend?

2
User 28812/1/24, 12:32 PM

Hi James; how was your weekend?

3
User 31112/1/24, 12:32 PM

hello James; Could you let the customer know we've fixed their issue?

9
User 90312/1/24, 12:32 PM

Hi James- how was your weekend?

8
User 84412/1/24, 12:32 PM

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

1
User 14712/1/24, 12:32 PM

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

1
User 12312/1/24, 12:32 PM

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

2
User 21412/1/24, 12:32 PM

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

8
User 81012/1/24, 12:32 PM

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

5
User 59012/1/24, 12:32 PM

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

2
User 23512/1/24, 12:31 PM

hi Nipunn, how's the weather in SF?

9
User 96612/1/24, 12:31 PM

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

7
User 71912/1/24, 12:31 PM

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

3
User 39912/1/24, 12:31 PM

hey Jamie; how's the weather in SF?

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