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/chat-js
- 最近来源活动
- 2026年9月12日 06:41
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1,201
- 分支
- 124
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- 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.
在 GitHub 查看