Hi - I answer from the OpenSmartRoute documentation: routing, the API, plans and quotas, self-hosting. Ask away, or open a support ticket if you need a person.
Grounded in the docs - follow a source before acting on it.
lazy-prefetch-pattern - Skill - OpenSmartRoute
Skillv1.0.0
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 behavi
Imported from FranciscoMoretti/chat-js (.agents/skills/lazy-prefetch-pattern/SKILL.md). Install upstream with npx skills add FranciscoMoretti/chat-js --skill lazy-prefetch-pattern. Copyright stays with the author.
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.
Use it
Copy one of these into your project. Installing also returns the manifest and these snippets.
# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot
curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'
Manifest
An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.
{
"ocm": "1",
"id": "franciscomoretti-chat-js-lazy-prefetch-pattern",
"kind": "skill",
"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.",
"publisher": "FranciscoMoretti",
"version": "1.0.0",
"capabilities": {
"domains": [
"data_analysis"
],
"tags": [
"skill-md",
"github"
],
"languages": [
"en"
]
},
"quality_prior": 0.6,
"examples": [
"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."
],
"primary": false,
"metadata": {
"source": {
"provider": "github",
"repository": "https://github.com/FranciscoMoretti/chat-js",
"path": ".agents/skills/lazy-prefetch-pattern/SKILL.md",
"ref": "4584f093835f1667c010c8fc20c502fa3f2bde41",
"url": "https://github.com/FranciscoMoretti/chat-js/blob/4584f093835f1667c010c8fc20c502fa3f2bde41/.agents/skills/lazy-prefetch-pattern/SKILL.md",
"key": "FranciscoMoretti/chat-js/.agents/skills/lazy-prefetch-pattern/SKILL.md"
}
},
"instructions": "# Lazy prefetch pattern\n\nStart optional server prefetches early without awaiting them so they can stream through React hydration without blocking rendering.\n\n- Use the exported `prefetch()` helper from `@/trpc/server`: `prefetch(trpc.foo.bar.queryOptions(...))`. It handles both paginated and non-paginated queries.\n- Await only data required before rendering.\n- Render through the existing `HydrateClient` or `HydrationBoundary`.\n\nThis depends on `trpc/query-client.ts` dehydrating pending queries and using SuperJSON for serialization and hydration. Preserve those settings when using this pattern.",
"cost": {
"context_tokens": 150
}
}
Fetch it by URL: GET /api/v1/registry/franciscomoretti-chat-js-lazy-prefetch-pattern/manifest?version=1.0.0
Reviews
Star ratings from people who tried it. One review per account; edit yours any time.
No reviews yet. Install it, try it, and be the first to rate it.
