This is a draft of moving data request on server. So far it looks like too much work. All of the changed code only moves the summary request to server components. This is how it works:
When a user types the URL, the browser then sends the URL to our server
The server tries to pre-render the HTML string of the server components
It makes the request to the summary
The result of this request is used to render the html without isLoading in react query. If user has JavaScript disabled in their browser, it would render the html of the summary block normally, without any skeleton loaders
The serialized data of the request is also sent to the browser via react-query's HydrationBoundary component. See the screenshot below – it shows how react-query populates the html with the server-side data that is then taken by the client
When the client component Summary tries to useQuery, it takes the data from the server instead of making the new request
Now, what do you think of this approach? Should we continue investigating the best pattern of server-side request?
Fixes #143
⚠️ EXPERIMENTAL
This is a draft of moving data request on server. So far it looks like too much work. All of the changed code only moves the
summaryrequest to server components. This is how it works:summaryisLoadingin react query. If user has JavaScript disabled in their browser, it would render the html of the summary block normally, without any skeleton loadersHydrationBoundarycomponent. See the screenshot below – it shows how react-query populates the html with the server-side data that is then taken by the clientSummarytries touseQuery, it takes the data from the server instead of making the new requestNow, what do you think of this approach? Should we continue investigating the best pattern of server-side request?