nehalist•3y ago

Load data client-side via react-query while using tRPC with SSR

Is there any way to load data client-side when using tRPC? I want my page to be rendered and load data dynamically, since this data is not SEO-relevant. As far as I'm understanding as soon as I turn on SSR in tRPC queries must be done before the page is rendered.

7 Replies

julius•3y ago

Seems like a use case for ssg where you can put some queries on the server and some on the client

julius•3y ago

https://trpc.io/docs/v10/ssg-helpers

SSG Helpers | tRPC

createProxySSGHelpers provides you a set of helper functions that you can use to prefetch queries on the server.

nehalistOP•3y ago

which means I'd have to disable ssr right?

julius•3y ago

yes

nehalistOP•3y ago

I don't know why but it kinda feels weird to disable it. all examples have it on and not having getServerSideProps (or similar) really makes code a lot easier to follow

julius•3y ago

wait hold on you can disable ssr on a procedure level too if most stuff are ssr

const clientQuery = trpc.post.byId({ id: 1 }, { 
  trpc: { ssr: false } 
});

const clientQuery = trpc.post.byId({ id: 1 }, { 
  trpc: { ssr: false } 
});

https://trpc.io/docs/v10/react-queries

nehalistOP•3y ago

oh, that's interesting. thanks!

Load data client-side via react-query while using tRPC with SSR

Did you find this page helpful?