Configures partial prerendering to serve cached HTML shells with live streaming holes in Rango routes.
npx skills add https://github.com/rangojs/rango --skill ppr-rangojs
Please help me install this Agent Skill. Skill: ppr Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/ppr Command: npx skills add https://github.com/rangojs/rango --skill ppr-rangojs
ppr path option to a page route; the router handles shell capture, storage, and serving with no middleware to mount. - Two hole mechanisms: Use loader() plus loading() for guaranteed-fresh structural holes, or pass un-awaited promises under <Suspense> for physics-based holes with no loader at all. - Middleware-safe commit point: The shell commit happens after the entire middleware chain, so auth guards and redirects always run before any cached byte is served. - Observability and testing: Verify behavior with the x-rango-shell: HIT | MISS header, x-rango-ppr-replay on partial navigations, and helpers like assertShellStatus from @rangojs/router/testing. - Use Case: A product page whose header and layout rarely change but whose price must be live: declare ppr: { ttl: 600, swr: 120 } on the route, register a LivePriceLoader with a loading() fallback, and every visitor gets the cached shell instantly while the price streams in fresh. ## Quick Start Ask the AI to add the ppr path option to a page route in the Rango urls() tree and configure a cache store such as CFCacheStore so the route serves a cached shell with live holes.High-intent search queries and answers about installing and using this skill.
Add the ppr path option to the page route in your urls() tree, for example ppr: true or ppr: { ttl: 600, swr: 120 }. The router serves the shell itself; you only need a createRouter cache store implementing getShell/putShell such as CFCacheStore or MemorySegmentCacheStore.
PPR caches only the rendered HTML shell and keeps designated holes live per request, so loaders stay fresh. document-cache freezes the entire response including loader output, serving all-or-nothing bytes with nothing live on a hit.
No. A route with no loader can PPR using promise holes: pass an un-awaited promise as a prop and let the consumer suspend under its own Suspense boundary. The boundary postpones at capture and resumes fresh on every hit.
Check the x-rango-shell header on a document GET: the first request reports MISS with a background capture, and later requests report HIT. In tests, use assertShellStatus from @rangojs/router/testing against a real served response.
A declared ppr route that cannot be honored falls back to plain rendering with no header and a once-per-key warning. Common causes are a cache store missing the shell family, a per-request nonce, or ctx.dynamic() being called in middleware or handlers.
Yes. The shell commit point is after the entire middleware chain, including global router.use() and route DSL middleware. Any rejection, redirect, or 401 runs before a single shell byte is served, on both misses and warmed hits.
mathfalconDefine code-based route trees with createRootRoute and createRoute for React apps.
greyhaven-aiImplement Cloudflare Workers observability with wrangler tail and health checks.
aashahinImplement Next.js 16 Cache Components with use cache, cacheLife, and cacheTag for Partial Prerendering.
1k-offEnable Partial Prerendering with Cache Components in Next.js App Router pages.