Routeurroutage PRISM
routage PRISM

Ce tutoriel utilise le routage par fichiers de PRISM : chaque dossier sous src/app/ devient une URL, avec layouts imbriqués et loaders côté serveur.

Voir la doc du routage →
UIbext/ui
bext/ui

Les composants viennent de bext/ui — un portage fidèle de shadcn/ui pour bext et PRISM, stylé via les tokens de route_css.

Explorer bext/ui →
FREN
Étape 9 sur 11 · Afficher des données

Recherche & filtres

Le loader reçoit la requête : lisez ses paramètres d'URL et filtrez les données côté serveur.

Pour rendre le tableau filtrable, lisez un paramètre d'URL. Le loader reçoit un objet request standard — analysez son URL et filtrez avant de renvoyer les données.

src/app/products/page.tsx
export async function loader({ request }) {
  const q = new URL(request.url).searchParams.get("q") ?? "";
  const products = CATALOGUE.filter((p) => p.name.includes(q));
  return { products, q };
}

Un simple <form method=\"get\"> met à jour l'URL avec ?q=… — pas de JavaScript, pas d'état. L'aperçu est filtré sur « lamp ».

ASTUCE
La pagination fonctionne pareil : lisez ?page dans le loader et découpez le résultat. Voir données & loaders.
Fichiers
src
app
products
src/app/products/page.tsxlecture seule
localhost:3000