Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: #143: experimentally request summary data on server #145

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

VanishMax
Copy link
Contributor

@VanishMax VanishMax commented Nov 21, 2024

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 summary request to server components. This is how it works:

  1. When a user types the URL, the browser then sends the URL to our server
  2. The server tries to pre-render the HTML string of the server components
  3. It makes the request to the summary
  4. 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
  5. 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
  6. 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?

Screenshot 2024-11-21 at 16 26 13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fetch and render critical data on the server
1 participant