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 83171/6/25, 4:36 AM

hi Jamie! how was your weekend?

8
User 83171/6/25, 4:35 AM

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

8
User 83171/6/25, 4:35 AM

hi James; how was your weekend?

9
User 97812/27/24, 2:05 PM

hello James... how was your weekend?

2
User 21412/27/24, 2:05 PM

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

9
User 92412/27/24, 2:05 PM

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

2
User 2212/27/24, 2:05 PM

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

6
User 6112/27/24, 2:05 PM

Hi Jamie, how's the weather in SF?

1
User 16612/27/24, 2:05 PM

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

6
User 64712/27/24, 2:05 PM

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

4
User 43212/27/24, 2:05 PM

hello Nipunn! how was your weekend?

3
User 31812/27/24, 2:05 PM

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

3
User 38812/27/24, 2:05 PM

hi James... how was your weekend?

6
User 60112/27/24, 2:05 PM

Hi Emma! how was your weekend?

3
User 31112/27/24, 2:05 PM

Hi Emma... how was your weekend?

3
User 32012/27/24, 2:05 PM

hello Emma, how was your weekend?

7
User 78812/27/24, 2:05 PM

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

7
User 7212/27/24, 2:04 PM

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

6
User 65812/27/24, 2:04 PM

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

7
User 71112/27/24, 2:04 PM

hey 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