Pagination
État de page piloté par l'URL via searchParams. Le loader découpe le jeu de données par ?page=N ; les liens font naviguer le navigateur, sans JS côté client. Rafraîchissement, partage et retour/avant fonctionnent car le numéro de page vit dans l'URL.
Astuce
Chaque paramètre ?page=N est indexable par les moteurs de recherche et mémorisable en favori — contrairement à un état local JS. Combinez pagination côté serveur et chargement infini côté client en pré-rendant la première page puis en chargeant les suivantes via fetch à partir de la même URL.
Lignes 31–40 sur 47
- #31 · Item 31
- #32 · Item 32
- #33 · Item 33
- #34 · Item 34
- #35 · Item 35
- #36 · Item 36
- #37 · Item 37
- #38 · Item 38
- #39 · Item 39
- #40 · Item 40
// Page reads ?page from searchParams; loader returns the slice +
// pagination metadata. Links carry ?page=N — no client JS, no
// state. Browser back/forward Just Works.
export async function loader({ request }) {
const url = new URL(request.url);
const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10));
const start = (page - 1) * PAGE_SIZE;
return {
rows: items.slice(start, start + PAGE_SIZE),
page,
totalPages: Math.ceil(items.length / PAGE_SIZE),
};
}
// Render: <a href={"?page=" + (page - 1)}>← prev</a>Un projet exécutable de cet exemple, ouvert dans l'éditeur bext play — modifiez le code, l'aperçu se met à jour.
Modifiable en direct — l'aperçu se recompile à chaque frappe.