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()
.
hello Nipunn! I'll be late to make the meeting tomorrow morning
hey Nipunn- how's the weather in SF?
hello James, what's your favorite ice cream place?
hi James... how's the weather in SF?
Hi Nipunn! I'll be late to make the meeting tomorrow morning
hello James; Could you let the customer know we've fixed their issue?
hey Nipunn; Could you let the customer know we've fixed their issue?
hi James... Could you let the customer know we've fixed their issue?
Hi James; how was your weekend?
Hi Emma- what's your favorite ice cream place?
hi Nipunn! how's the weather in SF?
hey Jamie, what's your favorite ice cream place?
Hi Nipunn! I'll be late to make the meeting tomorrow morning
hello Jamie! I'll be late to make the meeting tomorrow morning
hello Nipunn... how's the weather in SF?
hello James... how's the weather in SF?
Hi James; Could you let the customer know we've fixed their issue?
hey Jamie... what's your favorite ice cream place?
hello Nipunn, how was your weekend?
hello 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.