https://github.com/trpc/use-client-stream-hydration
Streamed hydration with "use client"-components
https://github.com/trpc/use-client-stream-hydration
Last synced: about 1 year ago
JSON representation
Streamed hydration with "use client"-components
- Host: GitHub
- URL: https://github.com/trpc/use-client-stream-hydration
- Owner: trpc
- Archived: true
- Created: 2023-06-01T23:24:42.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-04T15:16:55.000Z (about 3 years ago)
- Last Synced: 2025-03-12T14:45:40.778Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://use-client-stream-hydration.vercel.app
- Size: 91.8 KB
- Stars: 39
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Streamed hydration with `"use client"` components using `@tanstack/react-query`.
Demo: https://use-client-stream-hydration.vercel.app/
## How this works
- We use `suspense: true` in our `useQuery()`-calls
- The API-requests from the `useQuery`-hooks get initialize on the server
- We use Next.js' `useServerInsertedHTML()` to insert ``-tags with dehydrated state of the request results.
- The browser subscribes to the data changes in said `<script>`-tags and updates the React Query cache
### Known limitations
- If the browser tree re-renders while the data is fetching, we'll initialize the request in the browser
- This is not "true" SSR and requires JS - the server does stream data to the browser, but if you View Source, you'll see that the DOM will only contain the suspense boundaries' fallbacks and not the DOM
## Prior art
- Apollo RFC: _"The Next.js "App Router", React Server Component & "SSR with Suspense"_ - https://github.com/apollographql/apollo-client-nextjs/blob/pr/RFC-2/RFC.md
- urql PR: _"support Next 13 and React Server Components"_ - https://github.com/urql-graphql/urql/pull/3214