What is prefetching in TRPC server side?
I was able to create a TRPC server helper with "createServerSideHelpers". I am using it in my server function like this:
But I don't understand what it is doing. The docs say it does not return anything and never throws. I tried importing "Client" that is actually a Client component to see how it behaves:
I thought it would somehow have sent the data into the ReactQuery as initialData or something, but it always fetches right when the Client component is mounted. I don't understand what prefetching does. Can someone explain
5 Replies
Prefetching is exactly what it sounds like to be, it is prefetching some kind of query, which you can call back later with prefetched data instead of calling query.
It is meant to be used in serverside so ie. in exported function of getServerSideProps - an example:
and then you if you fetch the data in the component with exactly the same parameters, you will get prefetched data from gSSP instead of naked useQuery call
ie.
not sure if it is gonna work if you are using 'use client' statement tho
keep in mind that prefetching in your main page might be slower than calling your route staightaway with useQuery or however you name it
Ok. But I am doing it through server components in app dir. that should be no problem right?
Yes, that's totally okay, just in your case, you want to use gSSP or gIP and prefetch ur query there
Do you know if I can do it via the server component? With no getServerSideProps
I tried to do it like the code I sent you but I didn’t see anything happening. I don’t know if it worked etc
I am importing the helpers that I created elsewhere with createServerSideHelpers
I don't really think so, prefetch will add the query to the cache, which you then dehydrate and send to the client.