perf(zxdb): server-render index pages with ISR and initial data

Why
- Reduce time-to-first-content on ZXDB index pages by eliminating the initial client-side fetch and enabling incremental static regeneration.

What
- Main Explorer (/zxdb):
  - Server-renders first page of results and lookup lists (genres, languages, machinetypes) and passes them as initial props.
  - Keeps client interactivity for subsequent searches/filters.
- Labels index (/zxdb/labels):
  - Server-renders first page of empty search and passes as initial props to skip the first fetch.
- Category lists:
  - Genres (/zxdb/genres), Languages (/zxdb/languages), Machine Types (/zxdb/machinetypes) now server-render their lists and export revalidate=3600.
  - Refactored list components to accept server-provided items; removed on-mount fetching.
- Links & prefetch:
  - Replaced remaining anchors with Next Link to enable prefetch where applicable.

Tech details
- Added revalidate=3600 to the index pages for ISR.
- Updated ZxdbExplorer to accept initial results and initial filter lists; skips first client fetch when initial props are present.
- Updated LabelsSearch to accept initial payload and skip first fetch in default state.
- Updated GenreList, LanguageList, MachineTypeList to be presentational components receiving items from server pages.

Notes
- Low-churn list APIs already emit Cache-Control for CDN; list pages now render instantly from server.
- Further polish (breadcrumbs, facet counts UI) can build on this foundation without reintroducing initial network waits.

Signed-off-by: Junie@lucy.xalior.com
This commit is contained in:
2025-12-12 15:31:10 +00:00
parent ad77b47117
commit 54cfe4f175
11 changed files with 106 additions and 87 deletions

View File

@@ -1,27 +1,10 @@
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
type Language = { id: string; name: string };
export default function LanguageList() {
const [items, setItems] = useState<Language[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function load() {
try {
const res = await fetch("/api/zxdb/languages", { cache: "no-store" });
const json = await res.json();
setItems(json.items ?? []);
} finally {
setLoading(false);
}
}
load();
}, []);
if (loading) return <div>Loading</div>;
export default function LanguageList({ items }: { items: Language[] }) {
return (
<div>
<h1>Languages</h1>