# 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.

- Skill: `franciscomoretti/lazy-prefetch-pattern` (Agent Skill)
- Install (CLI): `npx skillmds@latest add franciscomoretti/lazy-prefetch-pattern`
- Raw SKILL.md: https://api.skillmd.com/api/skills/franciscomoretti/lazy-prefetch-pattern/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: franciscomoretti (https://skillmd.com/u/franciscomoretti)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/franciscomoretti/lazy-prefetch-pattern

---


# 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 `HydrateClient` or `HydrationBoundary`.

This depends on `trpc/query-client.ts` dehydrating pending queries and using SuperJSON for serialization and hydration. Preserve those settings when using this pattern.