searchParams
PRISM injecte ?q=… de l'URL dans props.searchParams. La page filtre une liste et produit du HTML frais à chaque envoi — pas de JS client, pas de loader nécessaire pour ce schéma.
Astuce
searchParams est disponible sans loader : PRISM les passe directement depuis l'URL. Si un paramètre peut apparaître plusieurs fois (ex. ?tag=a&tag=b), sa valeur est string[] — vérifiez avec Array.isArray avant d'utiliser.
Résultat
24 correspondances
- apple
- apricot
- avocado
- banana
- blackberry
- blueberry
- cherry
- coconut
- cranberry
- fig
- grape
- guava
- kiwi
- lemon
- mango
- orange
- papaya
- peach
- pear
- pineapple
- plum
- raspberry
- strawberry
- watermelon
// PRISM threads ?q=… into props.searchParams — no loader needed.
export default function Page(props: {
searchParams?: { q?: string };
}) {
const q = props.searchParams?.q ?? "";
const items = q
? FRUITS.filter((f) => f.toLowerCase().includes(q.toLowerCase()))
: FRUITS;
return (
<form method="get">
<input name="q" value={q} placeholder="search fruits…" />
<button type="submit">search</button>
<p>{items.length} {items.length === 1 ? "match" : "matches"}{q ? ` for "${q}"` : ""}</p>
<ul>{items.map((i) => <li>{i}</li>)}</ul>
</form>
);
}