What is the difference between preloading query vs fetching queries in server components?
I have a parent component in Next JS which is a server component, that is rendering two children components both of which are client components. I need to access the query in both the client components.
After going through the docs, I can see there are two approaches to get this done.
1. Preloading the query and then accessing the preloaded query in the client componens.
2. fetching the query using
fetchQuery in server component and passing the data to the client components.
Also, will preloading the query and then accessing it using usePreloadedQuery call the query twice?
What does it mean when it says that it will not be reactive when using fetchQuery?2 Replies
1. fetchQuery: Your Next.js server fetches the data from Convex and renders it. The data stays the same until the page is reloaded / the RSC is refetched.
2. preloadQuery: Your Next.js server also fetches the data from Convex and renders it. Then the client subscribes to the same query (usually the query call will be cached on the Convex server), and keeps being subscribed, getting new results pushed from the server.
So with
fetchQuery the query results can be stale, with preloadQuery the results are kept up to date "reactive".Ah, that explains it. Thank you.