Fix ZXDB pagination counters and navigation

Implement URL-driven pagination and correct total counts across ZXDB:
- Root /zxdb: SSR reads ?page; client syncs to SSR; Prev/Next as Links.
- Sub-index pages (genres, languages, machinetypes): parse ?page on server; use SSR props in clients; Prev/Next via Links.
- Labels browse (/zxdb/labels): dynamic SSR, reads ?q & ?page; typed count(*); client syncs to SSR; Prev/Next preserve q.
- Label detail (/zxdb/labels/[id]): tab-aware Prev/Next Links; counters from server.
- Repo: replace raw counts with typed Drizzle count(*) for reliable totals.

Signed-off-by: Junie <Junie@lucy.xalior.com>

src/app/zxdb/ZxdbExplorer.tsx

@@ -30,7 +30,7 @@ export default function ZxdbExplorer({
   initialMachines?: { id: number; name: string }[];
 }) {
   const [q, setQ] = useState("");
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(initial?.page ?? 1);
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
   const [genres, setGenres] = useState<{ id: number; name: string }[]>(initialGenres ?? []);
@@ -39,7 +39,7 @@ export default function ZxdbExplorer({
   const [genreId, setGenreId] = useState<number | "">("");
   const [languageId, setLanguageId] = useState<string | "">("");
   const [machinetypeId, setMachinetypeId] = useState<number | "">("");
-  const [sort, setSort] = useState<"title" | "id_desc">("title");
+  const [sort, setSort] = useState<"title" | "id_desc">("id_desc");
 
   const pageSize = 20;
   const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
@@ -69,8 +69,27 @@ export default function ZxdbExplorer({
   }
 
   useEffect(() => {
-    // Avoid immediate client fetch on first paint if server provided initial data
-    if (initial && page === 1 && q === "" && genreId === "" && languageId === "" && machinetypeId === "" && sort === "title") {
+    // When navigating via Next.js Links that change ?page=, SSR provides new `initial`.
+    // Sync local state from new SSR payload so the list and counter update immediately
+    // without an extra client fetch.
+    if (initial) {
+      setData(initial);
+      setPage(initial.page);
+    }
+  }, [initial]);
+
+  useEffect(() => {
+    // Avoid immediate client fetch on first paint if server provided initial data for this exact state
+    const initialPage = initial?.page ?? 1;
+    if (
+      initial &&
+      page === initialPage &&
+      q === "" &&
+      genreId === "" &&
+      languageId === "" &&
+      machinetypeId === "" &&
+      sort === "id_desc"
+    ) {
       return;
     }
     fetchData(q, page);
@@ -185,23 +204,25 @@ export default function ZxdbExplorer({
       </div>
 
       <div className="d-flex align-items-center gap-2 mt-2">
-        <button
-          className="btn btn-outline-secondary"
-          onClick={() => setPage((p) => Math.max(1, p - 1))}
-          disabled={loading || page <= 1}
-        >
-          Prev
-        </button>
         <span>
-          Page {data?.page ?? page} / {totalPages}
+          Page {data?.page ?? 1} / {totalPages}
         </span>
-        <button
-          className="btn btn-outline-secondary"
-          onClick={() => setPage((p) => p + 1)}
-          disabled={loading || (data ? data.page >= totalPages : false)}
-        >
-          Next
-        </button>
+        <div className="ms-auto d-flex gap-2">
+          <Link
+            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
+            aria-disabled={!data || data.page <= 1}
+            href={`/zxdb?page=${Math.max(1, (data?.page ?? 1) - 1)}`}
+          >
+            Prev
+          </Link>
+          <Link
+            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
+            aria-disabled={!data || data.page >= totalPages}
+            href={`/zxdb?page=${Math.min(totalPages, (data?.page ?? 1) + 1)}`}
+          >
+            Next
+          </Link>
+        </div>
       </div>
 
       <hr />

src/app/zxdb/genres/[id]/GenreDetail.tsx

@@ -1,21 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
 
 export default function GenreDetailClient({ id, initial }: { id: number; initial: Paged<Item> }) {
-  const [data] = useState<Paged<Item>>(initial);
-  const [page] = useState(1);
-  const totalPages = useMemo(() => Math.max(1, Math.ceil(data.total / data.pageSize)), [data]);
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
 
   return (
     <div className="container">
       <h1>Genre #{id}</h1>
-      {data && data.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
-      {data && data.items.length > 0 && (
+      {initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
+      {initial && initial.items.length > 0 && (
         <div className="table-responsive">
           <table className="table table-striped table-hover align-middle">
             <thead>
@@ -27,7 +25,7 @@ export default function GenreDetailClient({ id, initial }: { id: number; initial
               </tr>
             </thead>
             <tbody>
-              {data.items.map((it) => (
+              {initial.items.map((it) => (
                 <tr key={it.id}>
                   <td>{it.id}</td>
                   <td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
@@ -41,7 +39,23 @@ export default function GenreDetailClient({ id, initial }: { id: number; initial
       )}
 
       <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data.page} / {totalPages}</span>
+        <span>Page {initial.page} / {totalPages}</span>
+        <div className="ms-auto d-flex gap-2">
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
+            aria-disabled={initial.page <= 1}
+            href={`/zxdb/genres/${id}?page=${Math.max(1, initial.page - 1)}`}
+          >
+            Prev
+          </Link>
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
+            aria-disabled={initial.page >= totalPages}
+            href={`/zxdb/genres/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
+          >
+            Next
+          </Link>
+        </div>
       </div>
     </div>
   );

src/app/zxdb/genres/[id]/page.tsx

@@ -3,11 +3,13 @@ import { entriesByGenre } from "@/server/repo/zxdb";
 
 export const metadata = { title: "ZXDB Genre" };
 
-export const revalidate = 3600;
+// Depends on searchParams (?page=). Force dynamic so each page renders correctly.
+export const dynamic = "force-dynamic";
 
-export default async function Page({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
+export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
+  const [{ id }, sp] = await Promise.all([params, searchParams]);
   const numericId = Number(id);
-  const initial = await entriesByGenre(numericId, 1, 20);
+  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
+  const initial = await entriesByGenre(numericId, page, 20);
   return <GenreDetailClient id={numericId} initial={initial as any} />;
 }

src/app/zxdb/labels/LabelsSearch.tsx

@@ -1,51 +1,34 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 type Label = { id: number; name: string; labeltypeId: string | null };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
 
-export default function LabelsSearch({ initial }: { initial?: Paged<Label> }) {
-  const [q, setQ] = useState("");
-  const [page, setPage] = useState(1);
+export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<Label>; initialQ?: string }) {
+  const router = useRouter();
+  const [q, setQ] = useState(initialQ ?? "");
   const [data, setData] = useState<Paged<Label> | null>(initial ?? null);
-  const [loading, setLoading] = useState(false);
-  const firstLoadSkipped = useRef(false);
-  const pageSize = 20;
   const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
 
-  async function load() {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams();
-      if (q) params.set("q", q);
-      params.set("page", String(page));
-      params.set("pageSize", String(pageSize));
-      const res = await fetch(`/api/zxdb/labels/search?${params.toString()}`, { cache: "no-store" });
-      const json = (await res.json()) as Paged<Label>;
-      setData(json);
-    } catch (e) {
-      setData({ items: [], page: 1, pageSize, total: 0 });
-    } finally {
-      setLoading(false);
-    }
-  }
-
+  // Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
   useEffect(() => {
-    // If server provided initial data for first page of empty search, skip first fetch
-    if (!firstLoadSkipped.current && initial && !q && page === 1) {
-      firstLoadSkipped.current = true;
-      return;
-    }
-    load();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page]);
+    if (initial) setData(initial);
+  }, [initial]);
+
+  // Keep input in sync with URL q on navigation
+  useEffect(() => {
+    setQ(initialQ ?? "");
+  }, [initialQ]);
 
   function submit(e: React.FormEvent) {
     e.preventDefault();
-    setPage(1);
-    load();
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    params.set("page", "1");
+    router.push(`/zxdb/labels?${params.toString()}`);
   }
 
   return (
@@ -56,13 +39,12 @@ export default function LabelsSearch({ initial }: { initial?: Paged<Label> }) {
           <input className="form-control" placeholder="Search labels…" value={q} onChange={(e) => setQ(e.target.value)} />
         </div>
         <div className="col-auto">
-          <button className="btn btn-primary" disabled={loading}>Search</button>
+          <button className="btn btn-primary">Search</button>
         </div>
       </form>
 
       <div className="mt-3">
-        {loading && <div>Loading…</div>}
-        {data && data.items.length === 0 && !loading && <div className="alert alert-warning">No labels found.</div>}
+        {data && data.items.length === 0 && <div className="alert alert-warning">No labels found.</div>}
         {data && data.items.length > 0 && (
           <ul className="list-group">
             {data.items.map((l) => (
@@ -76,15 +58,23 @@ export default function LabelsSearch({ initial }: { initial?: Paged<Label> }) {
       </div>
 
       <div className="d-flex align-items-center gap-2 mt-2">
-        <button className="btn btn-outline-secondary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={loading || page <= 1}>
-          Prev
-        </button>
-        <span>
-          Page {data?.page ?? page} / {totalPages}
-        </span>
-        <button className="btn btn-outline-secondary" onClick={() => setPage((p) => p + 1)} disabled={loading || (data ? data.page >= totalPages : false)}>
-          Next
-        </button>
+        <span>Page {data?.page ?? 1} / {totalPages}</span>
+        <div className="ms-auto d-flex gap-2">
+          <Link
+            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
+            aria-disabled={!data || data.page <= 1}
+            href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
+          >
+            Prev
+          </Link>
+          <Link
+            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
+            aria-disabled={!data || data.page >= totalPages}
+            href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
+          >
+            Next
+          </Link>
+        </div>
       </div>
     </div>
   );

src/app/zxdb/labels/[id]/LabelDetail.tsx

@@ -9,22 +9,21 @@ type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
 
 type Payload = { label: Label | null; authored: Paged<Item>; published: Paged<Item> };
 
-export default function LabelDetailClient({ id, initial }: { id: number; initial: Payload }) {
-  const [data] = useState<Payload>(initial);
-  const [tab, setTab] = useState<"authored" | "published">("authored");
-  const [page] = useState(1);
+export default function LabelDetailClient({ id, initial, initialTab }: { id: number; initial: Payload; initialTab?: "authored" | "published" }) {
+  // Keep only interactive UI state (tab). Data should come directly from SSR props so it updates on navigation.
+  const [tab, setTab] = useState<"authored" | "published">(initialTab ?? "authored");
 
-  if (!data || !data.label) return <div className="alert alert-warning">Not found</div>;
+  if (!initial || !initial.label) return <div className="alert alert-warning">Not found</div>;
 
-  const current = useMemo(() => (tab === "authored" ? data.authored : data.published), [data, tab]);
+  const current = useMemo(() => (tab === "authored" ? initial.authored : initial.published), [initial, tab]);
   const totalPages = useMemo(() => Math.max(1, Math.ceil(current.total / current.pageSize)), [current]);
 
   return (
     <div className="container">
       <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
-        <h1 className="mb-0">{data.label.name}</h1>
+        <h1 className="mb-0">{initial.label.name}</h1>
         <div>
-          <span className="badge text-bg-light">{data.label.labeltypeId ?? "?"}</span>
+          <span className="badge text-bg-light">{initial.label.labeltypeId ?? "?"}</span>
         </div>
       </div>
 
@@ -66,7 +65,23 @@ export default function LabelDetailClient({ id, initial }: { id: number; initial
       </div>
 
       <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {page} / {totalPages}</span>
+        <span>Page {current.page} / {totalPages}</span>
+        <div className="ms-auto d-flex gap-2">
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${current.page <= 1 ? "disabled" : ""}`}
+            aria-disabled={current.page <= 1}
+            href={`/zxdb/labels/${id}?tab=${tab}&page=${Math.max(1, current.page - 1)}`}
+          >
+            Prev
+          </Link>
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${current.page >= totalPages ? "disabled" : ""}`}
+            aria-disabled={current.page >= totalPages}
+            href={`/zxdb/labels/${id}?tab=${tab}&page=${Math.min(totalPages, current.page + 1)}`}
+          >
+            Next
+          </Link>
+        </div>
       </div>
     </div>
   );

src/app/zxdb/labels/[id]/page.tsx

@@ -3,17 +3,21 @@ import { getLabelById, getLabelAuthoredEntries, getLabelPublishedEntries } from
 
 export const metadata = { title: "ZXDB Label" };
 
-export const revalidate = 3600;
+// Depends on searchParams (?page=, ?tab=). Force dynamic so each request renders correctly.
+export const dynamic = "force-dynamic";
 
-export default async function Page({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
+export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
+  const [{ id }, sp] = await Promise.all([params, searchParams]);
   const numericId = Number(id);
+  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
+  const tab = (Array.isArray(sp.tab) ? sp.tab[0] : sp.tab) as "authored" | "published" | undefined;
   const [label, authored, published] = await Promise.all([
     getLabelById(numericId),
-    getLabelAuthoredEntries(numericId, { page: 1, pageSize: 20 }),
-    getLabelPublishedEntries(numericId, { page: 1, pageSize: 20 }),
+    getLabelAuthoredEntries(numericId, { page, pageSize: 20 }),
+    getLabelPublishedEntries(numericId, { page, pageSize: 20 }),
   ]);
 
   // Let the client component handle the "not found" simple state
-  return <LabelDetailClient id={numericId} initial={{ label: label as any, authored: authored as any, published: published as any }} />;
+  return <LabelDetailClient id={numericId} initial={{ label: label as any, authored: authored as any, published: published as any }} initialTab={tab} />;
 }

src/app/zxdb/labels/page.tsx

@@ -3,10 +3,13 @@ import { searchLabels } from "@/server/repo/zxdb";
 
 export const metadata = { title: "ZXDB Labels" };
 
-export const revalidate = 3600;
+// Depends on searchParams (?q=, ?page=). Force dynamic so each request renders correctly.
+export const dynamic = "force-dynamic";
 
-export default async function Page() {
-  // Server-render first page of empty search for instant content
-  const initial = await searchLabels({ page: 1, pageSize: 20 });
-  return <LabelsSearch initial={initial as any} />;
+export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
+  const sp = await searchParams;
+  const q = (Array.isArray(sp.q) ? sp.q[0] : sp.q) ?? "";
+  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
+  const initial = await searchLabels({ q, page, pageSize: 20 });
+  return <LabelsSearch initial={initial as any} initialQ={q} />;
 }

src/app/zxdb/languages/[id]/LanguageDetail.tsx

@@ -1,20 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
 
 export default function LanguageDetailClient({ id, initial }: { id: string; initial: Paged<Item> }) {
-  const [data] = useState<Paged<Item>>(initial);
-  const totalPages = useMemo(() => Math.max(1, Math.ceil(data.total / data.pageSize)), [data]);
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
 
   return (
     <div className="container">
       <h1>Language {id}</h1>
-      {data && data.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
-      {data && data.items.length > 0 && (
+      {initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
+      {initial && initial.items.length > 0 && (
         <div className="table-responsive">
           <table className="table table-striped table-hover align-middle">
             <thead>
@@ -26,7 +25,7 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
               </tr>
             </thead>
             <tbody>
-              {data.items.map((it) => (
+              {initial.items.map((it) => (
                 <tr key={it.id}>
                   <td>{it.id}</td>
                   <td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
@@ -40,7 +39,23 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
       )}
 
       <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data.page} / {totalPages}</span>
+        <span>Page {initial.page} / {totalPages}</span>
+        <div className="ms-auto d-flex gap-2">
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
+            aria-disabled={initial.page <= 1}
+            href={`/zxdb/languages/${id}?page=${Math.max(1, initial.page - 1)}`}
+          >
+            Prev
+          </Link>
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
+            aria-disabled={initial.page >= totalPages}
+            href={`/zxdb/languages/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
+          >
+            Next
+          </Link>
+        </div>
       </div>
     </div>
   );

src/app/zxdb/languages/[id]/page.tsx

@@ -3,10 +3,12 @@ import { entriesByLanguage } from "@/server/repo/zxdb";
 
 export const metadata = { title: "ZXDB Language" };
 
-export const revalidate = 3600;
+// Depends on searchParams (?page=). Force dynamic so each page renders correctly.
+export const dynamic = "force-dynamic";
 
-export default async function Page({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
-  const initial = await entriesByLanguage(id, 1, 20);
+export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
+  const [{ id }, sp] = await Promise.all([params, searchParams]);
+  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
+  const initial = await entriesByLanguage(id, page, 20);
   return <LanguageDetailClient id={id} initial={initial as any} />;
 }

src/app/zxdb/machinetypes/[id]/MachineTypeDetail.tsx

@@ -1,20 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
 
 export default function MachineTypeDetailClient({ id, initial }: { id: number; initial: Paged<Item> }) {
-  const [data] = useState<Paged<Item>>(initial);
-  const totalPages = useMemo(() => Math.max(1, Math.ceil(data.total / data.pageSize)), [data]);
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
 
   return (
     <div className="container">
       <h1>Machine Type #{id}</h1>
-      {data && data.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
-      {data && data.items.length > 0 && (
+      {initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
+      {initial && initial.items.length > 0 && (
         <div className="table-responsive">
           <table className="table table-striped table-hover align-middle">
             <thead>
@@ -26,7 +25,7 @@ export default function MachineTypeDetailClient({ id, initial }: { id: number; i
               </tr>
             </thead>
             <tbody>
-              {data.items.map((it) => (
+              {initial.items.map((it) => (
                 <tr key={it.id}>
                   <td>{it.id}</td>
                   <td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
@@ -40,7 +39,23 @@ export default function MachineTypeDetailClient({ id, initial }: { id: number; i
       )}
 
       <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data.page} / {totalPages}</span>
+        <span>Page {initial.page} / {totalPages}</span>
+        <div className="ms-auto d-flex gap-2">
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
+            aria-disabled={initial.page <= 1}
+            href={`/zxdb/machinetypes/${id}?page=${Math.max(1, initial.page - 1)}`}
+          >
+            Prev
+          </Link>
+          <Link
+            className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
+            aria-disabled={initial.page >= totalPages}
+            href={`/zxdb/machinetypes/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
+          >
+            Next
+          </Link>
+        </div>
       </div>
     </div>
   );

src/app/zxdb/machinetypes/[id]/page.tsx

@@ -2,12 +2,13 @@ import MachineTypeDetailClient from "./MachineTypeDetail";
 import { entriesByMachinetype } from "@/server/repo/zxdb";
 
 export const metadata = { title: "ZXDB Machine Type" };
+// Depends on searchParams (?page=). Force dynamic so each page renders correctly.
+export const dynamic = "force-dynamic";
 
-export const revalidate = 3600;
-
-export default async function Page({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
+export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
+  const [{ id }, sp] = await Promise.all([params, searchParams]);
   const numericId = Number(id);
-  const initial = await entriesByMachinetype(numericId, 1, 20);
+  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
+  const initial = await entriesByMachinetype(numericId, page, 20);
   return <MachineTypeDetailClient id={numericId} initial={initial as any} />;
 }

src/app/zxdb/page.tsx

@@ -5,12 +5,16 @@ export const metadata = {
   title: "ZXDB Explorer",
 };
 
-export const revalidate = 3600;
+// This page depends on searchParams (?page=, filters in future). Force dynamic
+// rendering so ISR doesn’t cache a single HTML for all query strings.
+export const dynamic = "force-dynamic";
 
-export default async function Page() {
-  // Server-render initial page (no query) to avoid first client fetch
+export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
+  const sp = await searchParams;
+  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
+  // Server-render initial page based on URL to avoid first client fetch and keep counter in sync
   const [initial, genres, langs, machines] = await Promise.all([
-    searchEntries({ page: 1, pageSize: 20, sort: "id_desc" }),
+    searchEntries({ page, pageSize: 20, sort: "id_desc" }),
     listGenres(),
     listLanguages(),
     listMachinetypes(),