D. Rimron-Soutter
54cfe4f175
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
22 lines
567 B
TypeScript
22 lines
567 B
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
type Language = { id: string; name: string };
|
|
|
|
export default function LanguageList({ items }: { items: Language[] }) {
|
|
return (
|
|
<div>
|
|
<h1>Languages</h1>
|
|
<ul className="list-group">
|
|
{items.map((l) => (
|
|
<li key={l.id} className="list-group-item d-flex justify-content-between align-items-center">
|
|
<Link href={`/zxdb/languages/${l.id}`}>{l.name}</Link>
|
|
<span className="badge text-bg-light">{l.id}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|