Define server data loaders for Rango routes with createLoader and consume them via useLoader.
npx skills add https://github.com/rangojs/rango --skill loader-rangojs
Please help me install this Agent Skill. Skill: loader Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/loader Command: npx skills add https://github.com/rangojs/rango --skill loader-rangojs
createLoader that resolve fresh per request even inside cache() boundaries, and consume them in client components with useLoader(). - Caching and revalidation control: Attach cache({ ttl, swr, tags, key }) per loader and use revalidate() with ctx.isAction() to control which loaders re-run after server actions or navigation. - Loader authority: Throw notFound() or redirect() from loaders so data-dependent routing decisions propagate to every consumer, with deterministic 404s via ssr: false. - Use Case: Build a product page where the product, related items, and reviews load in parallel, stream into Suspense boundaries, and the cart loader revalidates only after cart actions run. ## Quick Start Ask the AI to create a Rango loader with createLoader that fetches a product by slug, register it on a route with loader(), and render the data in a client component using useLoader.High-intent search queries and answers about installing and using this skill.
Create a loader by calling createLoader with an async handler that receives a context object with params, routeParams, request, url, env, and reverse. Register it on a route with loader(ProductLoader) in the DSL, then consume the data in a client component with useLoader(ProductLoader).
Register loaders with the loader() DSL, since DSL loaders are excluded from the segment cache and re-resolved fresh on every request. The route's cached UI streams instantly while loaders resolve live in parallel, giving cached UI plus fresh data by default.
Yes, attach a cache child to the loader: loader(ProductLoader, () => [cache({ ttl: 300 })]). You can customize the cache key, add invalidation tags, enable stale-while-revalidate with swr, set a condition to bypass caching, or override the store per loader.
Prefer the DSL loader() registration with client-side useLoader(), which keeps data fresh and cache-safe. ctx.use(Loader) is an escape hatch for server handlers, but it bakes loader data into cached output and defeats the live data guarantee inside cache() boundaries.
A revalidate callback returning a hard false via ?? false short-circuits the chain and suppresses the loader's permissive defaults, including param-change refetches. Use || undefined to defer so the loader still revalidates on param or search changes while adding your action-matching signal.
Yes, loaders may throw notFound() and redirect() so every consumer inherits the signal. On document loads the 404 status is opportunistic unless you set ssr: false, which settles the loader before first flush and produces a deterministic 404 with not-found UI.
mehdibhaImplements type-safe routing with TanStack Router route trees, loaders, and navigation.
FenntasyAutomate server-first data loading and mutations for React Router v7 SSR applications.
HallinnaRefactor React data fetching with TanStack Query caching and Suspense.
guillempucheIntegrate TanStack Query as an external data cache for TanStack Router.