client-urls

Defines client-component route groups with clientUrls() in Rango React RSC applications.

Updated Nov 7, 2025
One-click install
npx skills add https://github.com/rangojs/rango --skill client-urls-rangojs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: client-urls
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/client-urls
Command: npx skills add https://github.com/rangojs/rango --skill client-urls-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @rangojs/router.

What problem does it solve? Server route handlers block the rendering pipeline on data fetches, making high-frequency navigation UIs like dashboards and admin panels feel slow. This Skill shows how to define route groups entirely in client components where data reads happen at consumption sites and revalidation runs in the browser. ## Core Features & Use Cases - Client route group definition: Use clientUrls() in a "use client" module with path(), layout(), loader(), loading(), revalidate(), transition(), and intercept() helpers, mounted into the server tree via include(). - Browser-run revalidation: Write per-loader revalidate() predicates that execute in the browser with param-sensitive and action-scoped logic, holding data across navigations that do not invalidate it. - Loader authority and SSR control: Loaders can throw notFound()/redirect(), write handles via ctx.use(), and opt into ssr:false so document renders await the loader for deterministic 404s and head meta. - Use Case: Build an admin dashboard where tab switches re-run nothing, product pages revalidate only when the slug param changes, and a cart badge loader refreshes only on cart actions. ## Quick Start Ask the AI to define a clientUrls() route group in a "use client" module with a layout, an index route, and a parameterized detail route whose loader uses a param-sensitive revalidate predicate, then mount it with include() in the server urls tree.

Frequently Asked Questions about client-urls

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

FAQPage Schema
How do I define client component routes in Rango?

Use clientUrls() inside a "use client" module and default-export the result. Define routes with path(), layout(), and loader() helpers using named function components, then mount the module in the server tree with include().

How does revalidate() work in clientUrls route groups?

A revalidate() predicate inside a loader() use callback runs in the browser with client-computable args like currentParams, nextParams, and isAction. Only its decision crosses the wire, so make predicates param-sensitive to avoid serving stale data on param navigations.

What is the difference between clientUrls() and urls() in Rango?

clientUrls() defines client-component routes with no handlers, where all data reads use useLoader at consumption sites. urls() defines server routes with handlers that can await ctx.use() in the pipeline. Use clientUrls() for fast-transition UIs and urls() for full-feature server routing.

Can I use middleware or errorBoundary inside clientUrls()?

No. include, parallel, cache, middleware, errorBoundary, and notFoundBoundary throw inside clientUrls() by design. Place middleware and boundaries at or around the include() mount in the server urls() tree instead.

When should I use the ssr:false loader option?

Flag a loader with ssr:false when its output must exist in the SSR'd document, such as head meta via handle pushes or a deterministic 404 status. Document renders then await that loader before first flush, while sibling loaders keep streaming.

Why does my clientUrls() definition throw at build time?

Common causes are anonymous or inline components instead of named function values, duplicate route patterns or names, a layout() with no path() inside, or a "use server" directive in a loader body. Everything in the definition must be JSON-projectable.