Agent-Skills.md

Agent Skills: Lazy prefetch pattern

Skill: lazy-prefetch-pattern

UncategorizedID: FranciscoMoretti/sparka/lazy-prefetch-pattern

Repository

FranciscoMoretti/sparka
FranciscoMorettiLicense: NOASSERTION
1,180111

Install this agent skill to your local

pnpm dlx add-skill https://github.com/FranciscoMoretti/chat-js/tree/HEAD/.agents/skills/lazy-prefetch-pattern

Skill Files

Browse the full folder contents for lazy-prefetch-pattern.

Download Skill

Loading file tree…

.agents/skills/lazy-prefetch-pattern/SKILL.md

Skill Metadata

Name
lazy-prefetch-pattern
Description
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.

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.