Profile My skills Saved Collections Edit profile Submit a skill

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.

franciscomoretti 8fb8075 868 B Updated
Web & Frontend

File contents

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.

franciscomoretti/chat-js/tree/main/.agents/skills/lazy-prefetch-pattern commit 8fb8075628

Browse category

Frequently asked questions

npx skillmds@latest add franciscomoretti/lazy-prefetch-pattern