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:
@@ -1,5 +1,5 @@
|
||||
import ZxdbExplorer from "./ZxdbExplorer";
|
||||
import { searchEntries } from "@/server/repo/zxdb";
|
||||
import { searchEntries, listGenres, listLanguages, listMachinetypes } from "@/server/repo/zxdb";
|
||||
|
||||
export const metadata = {
|
||||
title: "ZXDB Explorer",
|
||||
@@ -9,6 +9,18 @@ export const revalidate = 3600;
|
||||
|
||||
export default async function Page() {
|
||||
// Server-render initial page (no query) to avoid first client fetch
|
||||
const initial = await searchEntries({ page: 1, pageSize: 20, sort: "id_desc" });
|
||||
return <ZxdbExplorer initial={initial as any} />;
|
||||
const [initial, genres, langs, machines] = await Promise.all([
|
||||
searchEntries({ page: 1, pageSize: 20, sort: "id_desc" }),
|
||||
listGenres(),
|
||||
listLanguages(),
|
||||
listMachinetypes(),
|
||||
]);
|
||||
return (
|
||||
<ZxdbExplorer
|
||||
initial={initial as any}
|
||||
initialGenres={genres as any}
|
||||
initialLanguages={langs as any}
|
||||
initialMachines={machines as any}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user