Agent skill

lazy-prefetch-pattern

Skill: lazy-prefetch-pattern

Stars 1,162
Forks 105

Install this agent skill to your Project

npx add-skill https://github.com/FranciscoMoretti/chat-js/tree/main/apps/chat/.cursor/skills/lazy-prefetch-pattern

SKILL.md

Lazy prefetch pattern (React Query v5 + Next RSC)

Goal: start prefetchQuery() early on the server without awaiting, so it doesn't block SSR / Suspense, while still hydrating on the client.

Requirements (repo-specific)

  • QueryClient must dehydrate pending queries.
    • In this repo that's in trpc/query-client.ts:
      • dehydrate.shouldDehydrateQuery includes query.state.status === "pending".
      • dehydrate.serializeData / hydrate.deserializeData use SuperJSON.

Pattern

In a Server Component (e.g. app/(chat)/layout.tsx):

  • Create/get the request-scoped query client (getQueryClient() from @/trpc/server)
  • Kick off prefetches with void (no await):
    • void queryClient.prefetchQuery(trpc.foo.bar.queryOptions(...))
  • Let HydrateClient/HydrationBoundary dehydrate the cache.

Use await only for data you must have before rendering (everything else should be lazy-prefetched).

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results