chore: commit pending ZXDB explorer changes prior to index perf work

Context
- Housekeeping commit to capture all current ZXDB Explorer work before index-page performance optimizations.

Includes
- Server-rendered entry detail page with ISR and parallelized DB queries.
- Node runtime for ZXDB API routes and params validation updates for Next 15.
- ZXDB repository extensions (facets, label queries, category queries).
- Cross-linking and Link-based prefetch across ZXDB UI.
- Cache headers on low-churn list APIs.

Notes
- Follow-up commit will focus specifically on speeding up index pages via SSR initial data and ISR.

Signed-off-by: Junie@lucy.xalior.com
This commit is contained in:
2025-12-12 15:25:35 +00:00
parent 3fe6f980c6
commit ad77b47117
27 changed files with 258 additions and 249 deletions

View File

@@ -1,9 +1,9 @@
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
type Label = { id: number; name: string; labeltypeId: string | null };
type EntryDetail = {
export type EntryDetailData = {
id: number;
title: string;
isXrated: number;
@@ -14,35 +14,7 @@ type EntryDetail = {
publishers: Label[];
};
export default function EntryDetailClient({ id }: { id: number }) {
const [data, setData] = useState<EntryDetail | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
let aborted = false;
async function run() {
setLoading(true);
setError(null);
try {
const res = await fetch(`/api/zxdb/entries/${id}`, { cache: "no-store" });
if (!res.ok) throw new Error(`Failed: ${res.status}`);
const json: EntryDetail = await res.json();
if (!aborted) setData(json);
} catch (e: any) {
if (!aborted) setError(e?.message ?? "Failed to load");
} finally {
if (!aborted) setLoading(false);
}
}
run();
return () => {
aborted = true;
};
}, [id]);
if (loading) return <div>Loading</div>;
if (error) return <div className="alert alert-danger">{error}</div>;
export default function EntryDetailClient({ data }: { data: EntryDetailData }) {
if (!data) return <div className="alert alert-warning">Not found</div>;
return (
@@ -50,19 +22,19 @@ export default function EntryDetailClient({ id }: { id: number }) {
<div className="d-flex align-items-center gap-2 flex-wrap">
<h1 className="mb-0">{data.title}</h1>
{data.genre.name && (
<a className="badge text-bg-secondary text-decoration-none" href={`/zxdb/genres/${data.genre.id}`}>
<Link className="badge text-bg-secondary text-decoration-none" href={`/zxdb/genres/${data.genre.id}`}>
{data.genre.name}
</a>
</Link>
)}
{data.language.name && (
<a className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${data.language.id}`}>
<Link className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${data.language.id}`}>
{data.language.name}
</a>
</Link>
)}
{data.machinetype.name && (
<a className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${data.machinetype.id}`}>
<Link className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${data.machinetype.id}`}>
{data.machinetype.name}
</a>
</Link>
)}
{data.isXrated ? <span className="badge text-bg-danger">18+</span> : null}
</div>
@@ -77,7 +49,7 @@ export default function EntryDetailClient({ id }: { id: number }) {
<ul className="list-unstyled mb-0">
{data.authors.map((a) => (
<li key={a.id}>
<a href={`/zxdb/labels/${a.id}`}>{a.name}</a>
<Link href={`/zxdb/labels/${a.id}`}>{a.name}</Link>
</li>
))}
</ul>
@@ -90,7 +62,7 @@ export default function EntryDetailClient({ id }: { id: number }) {
<ul className="list-unstyled mb-0">
{data.publishers.map((p) => (
<li key={p.id}>
<a href={`/zxdb/labels/${p.id}`}>{p.name}</a>
<Link href={`/zxdb/labels/${p.id}`}>{p.name}</Link>
</li>
))}
</ul>
@@ -101,8 +73,8 @@ export default function EntryDetailClient({ id }: { id: number }) {
<hr />
<div className="d-flex align-items-center gap-2">
<a className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</a>
<a className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</a>
<Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</Link>
<Link className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</Link>
</div>
</div>
);