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 1–10 sur 47

#01 · Item 01
#02 · Item 02
#03 · Item 03
#04 · Item 04
#05 · Item 05
#06 · Item 06
#07 · Item 07
#08 · Item 08
#09 · Item 09
#10 · Item 10

src/app/examples/pagination/page.tsxTSX

// 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>

Pagination

Lignes 1–10 sur 47

Documentation associée