lazy-prefetch-pattern
Use the ChatJS React Query v5 lazy-prefetch pattern without blocking server rendering. Use when prefetching tRPC queries in Next.js Server Components or changing query dehydration and hydration behavior in apps/chat.
76
95%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Lazy prefetch pattern
Start optional server prefetches early without awaiting them so they can stream through React hydration without blocking rendering.
- Use the exported
prefetch()helper from@/trpc/server:prefetch(trpc.foo.bar.queryOptions(...)). It handles both paginated and non-paginated queries. - Await only data required before rendering.
- Render through the existing
HydrateClientorHydrationBoundary.
This depends on trpc/query-client.ts dehydrating pending queries and using
SuperJSON for serialization and hydration. Preserve those settings when using
this pattern.
- Repository
- FranciscoMoretti/chat-js
- Commit
f66626f
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.