skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

caching

Configure route and segment caching with memory, Cloudflare KV, or Vercel cache stores in @rangojs/router.

Updated Nov 7, 2025
Search Tags:#caching#router#cache invalidation#cloudflare kv#react server components#stale-while-revalidate#edge cache
One-click install
npx skills add https://github.com/rangojs/rango --skill caching-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: caching
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/caching
Command: npx skills add https://github.com/rangojs/rango --skill caching-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @rangojs/router.

What problem does it solve? Responses in a React Server Components app are re-rendered on every request by default, wasting compute on content that rarely changes, while naive caching risks leaking per-user data into shared entries. This Skill configures segment-level caching with stale-while-revalidate so expensive renders are served from a store while loaders stay fresh per request. ## Core Features & Use Cases - Route and segment caching: Wrap route subtrees in the cache() DSL with TTL and SWR windows, nest boundaries for overrides, and cache individual loader results independently. - Tag-based invalidation: Attach static or dynamic tags to cached entries and evict them from server actions with updateTag or from route handlers with revalidateTag. - Pluggable cache stores: Use MemorySegmentCacheStore for single-instance deployments or CFCacheStore on Cloudflare Workers with optional KV as a cross-colo L2 layer, latency budgets, and fail-safe degradation. - Cache purity guards: Request-scoped APIs like cookies() and headers() throw inside cached handlers, forcing per-request data into loaders consumed via useLoader() in client components. - Use Case: A blog index page with an expensive render is wrapped in cache({ ttl: 60, swr: 300 }) on Cloudflare Workers with a KV namespace, tagged "posts", and invalidated via updateTag("posts") in the publish server action so readers see fresh content immediately after edits. ## Quick Start Ask the AI to wrap your route subtree in a cache() boundary with a TTL and SWR window and wire up a MemorySegmentCacheStore or CFCacheStore in createRouter.

Frequently Asked Questions about caching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I cache routes in @rangojs/router?▼

Wrap route subtrees in the cache() DSL function with ttl and swr options, for example cache({ ttl: 60, swr: 300 }, () => [path("/blog", BlogIndex)]). Configure a store such as MemorySegmentCacheStore or CFCacheStore in createRouter's cache option.

How do I invalidate cached routes by tag?▼

Attach tags in the cache() options or via cacheTag(), then call await updateTag("tag") inside a server action for read-your-own-writes, or revalidateTag("tag") in a route handler for background invalidation. All three built-in stores support tags.

Does @rangojs/router caching work on Cloudflare Workers?▼

Yes, CFCacheStore uses the Cloudflare Cache API as L1 and accepts an optional KV namespace binding as an L2 layer for cross-colo persistence. KV entries require expirationTtl of at least 60 seconds, and reads degrade fail-safely between tiers.

Why does cookies() throw inside a cached route handler?▼

Request-scoped APIs like cookies() and headers() throw inside a cache() boundary because their values would be frozen into the shared cache entry and leaked to other users. Move that logic into a loader and consume it with useLoader() in a client component.

When should I not use cache() on a route?▼

Avoid cache() when the segment's render is cheap, since a cache hit still runs middleware, the store read, and the surrounding document render for no latency win. If only the data is expensive and changes per request, cache the loader data instead of the rendered segment.

Related Skills

Explore More Software Engineering Skills→
mehdibhamehdibha
1.4k

router-core

Implements type-safe routing with TanStack Router route trees, loaders, and navigation.

Community
Intermediate
one-ieone-ie
129

astro

Build Astro 6 apps with React islands on Cloudflare Workers.

Official
Advanced
AgentientAgentient
2

nextjs-app-router-data-fetching

Fetches and mutates data in Next.js 14+ App Router using server components and server actions with caching/revalidation controls.

Official
Advanced
BrunoAlpezdevBrunoAlpezdev

next-cache-components

Configure Next.js Cache Components with cacheComponents and use cache directives.

Community
Intermediate