├── .eslintrc ├── .gitignore ├── README.md ├── next.config.js ├── package.json ├── pnpm-lock.yaml ├── src └── app │ ├── api │ └── wait │ │ └── route.ts │ ├── layout.tsx │ ├── lib │ ├── HydrationStreamProvider.tsx │ └── ReactQueryStreamedHydration.tsx │ ├── page.tsx │ └── providers.tsx └── tsconfig.json /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next", "prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | .vscode 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Streamed hydration with `"use client"` components using `@tanstack/react-query`. 2 | 3 | Demo: https://use-client-stream-hydration.vercel.app/ 4 | 5 | ## How this works 6 | 7 | - We use `suspense: true` in our `useQuery()`-calls 8 | - The API-requests from the `useQuery`-hooks get initialize on the server 9 | - We use Next.js' `useServerInsertedHTML()` to insert `