tRPC, SSR, RSC/app directory
Is it possible to use tRPC when rendering a component on the server to get an initial value for a request before refetching on the client on mount? If not, what is the next best thing?
fetch on the server and pass value to the client component using tRPC to set the initialValue on useQuery? Are there problems with that?
Does anyone have a current workflow in which they are successfully using tRPC with the app directory and able to SSR with data from tRPC useQuery?
Is there an alternative solution to using react-query or swr with fetch?5 Replies
There is the option of prefetching data
Server-Side Helpers | tRPC
The server-side helpers provides you with a set of helper functions that you can use to prefetch queries on the server. This is useful for SSG, but also for SSR if you opt not to use ssr: true.
You can "prefetch" what you would normally query on the clientside, on the server
mening when you get to the client, you already have data to display instead of having to load
however, I havent really used this so proceed with care
However, one thing I did do was use GSSP to fetch the data I need then pass it as props... however, this makes the initial load slower
This needs to happen in the pages router rather than app router if it is using gSSP?
Wondering how I can do something similar in the app router if possible
Use either a caller or extract your procedure to a function and call that
Then pass the data as initialData