Lazy prefetch pattern
SkillMediaUse 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.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Lazy prefetch pattern skill
What this skill tells your AI
The instructions your AI receives, as published by franciscomoretti/chat-js in .agents/skills/lazy-prefetch-pattern/SKILL.md and read by ahel’s review.
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.
Signals
- GitHub stars
- 1k
- Forks
- 122
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
lazy-prefetch-pattern- Source
- github.com/franciscomoretti/chat-js