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.
Datos de origen
- Repositorio
- FranciscoMoretti/chat-js
- Última actividad en el origen
- 12 de septiembre de 2026 a las 06:41
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 1201
- Forks
- 124
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- 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.
Ver en GitHub