{"id":19218076,"url":"https://github.com/trpc/use-client-stream-hydration","last_synced_at":"2025-04-20T20:31:31.086Z","repository":{"id":171788723,"uuid":"648414612","full_name":"trpc/use-client-stream-hydration","owner":"trpc","description":"Streamed hydration with \"use client\"-components","archived":true,"fork":false,"pushed_at":"2023-06-04T15:16:55.000Z","size":94,"stargazers_count":39,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-12T14:45:40.778Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://use-client-stream-hydration.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trpc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-01T23:24:42.000Z","updated_at":"2024-09-28T16:26:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4534656-adb5-4a97-a362-247dd6fb8d14","html_url":"https://github.com/trpc/use-client-stream-hydration","commit_stats":null,"previous_names":["trpc/use-client-stream-hydration"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trpc%2Fuse-client-stream-hydration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trpc%2Fuse-client-stream-hydration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trpc%2Fuse-client-stream-hydration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trpc%2Fuse-client-stream-hydration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trpc","download_url":"https://codeload.github.com/trpc/use-client-stream-hydration/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249958121,"owners_count":21351597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T14:25:07.479Z","updated_at":"2025-04-20T20:31:31.076Z","avatar_url":"https://github.com/trpc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Streamed hydration with `\"use client\"` components using `@tanstack/react-query`.\n\nDemo: https://use-client-stream-hydration.vercel.app/\n\n## How this works\n\n- We use `suspense: true` in our `useQuery()`-calls\n- The API-requests from the `useQuery`-hooks get initialize on the server\n- We use Next.js' `useServerInsertedHTML()` to insert `\u003cscript\u003e`-tags with dehydrated state of the request results.\n- The browser subscribes to the data changes in said `\u003cscript\u003e`-tags and updates the React Query cache\n\n### Known limitations\n\n- If the browser tree re-renders while the data is fetching, we'll initialize the request in the browser\n- 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\n\n## Prior art\n\n- Apollo RFC: _\"The Next.js \"App Router\", React Server Component \u0026 \"SSR with Suspense\"_ - https://github.com/apollographql/apollo-client-nextjs/blob/pr/RFC-2/RFC.md\n- urql PR: _\"support Next 13 and React Server Components\"_ - https://github.com/urql-graphql/urql/pull/3214\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrpc%2Fuse-client-stream-hydration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrpc%2Fuse-client-stream-hydration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrpc%2Fuse-client-stream-hydration/lists"}