prefetch all disc images at buildtime

cdleveille · May 31, 2024 · 1c98b06 · 1c98b06
1 parent 0773970
commit 1c98b06
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 42 deletions.
diff --git a/src/app/[name_slug]/page.tsx b/src/app/[name_slug]/page.tsx
@@ -1,4 +1,11 @@
 import { DiscDetail } from "@components";
+import { API } from "@services";
+
+export const generateStaticParams = async () => {
+	const discs = await API.getDiscs();
+	const paths = discs.map(({ name_slug }) => ({ params: { name_slug } }));
+	return paths;
+};
 
 export default function DiscDetailPage({ params: { name_slug } }: { params: { name_slug: string } }) {
 	return <DiscDetail name_slug={name_slug} />;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import "./globals.css";
 import { Inter } from "next/font/google";
 
 import { DiscContextProvider } from "@components";
-import { useApi } from "@hooks";
+import { API } from "@services";
 
 import type { Metadata } from "next";
 
@@ -16,8 +16,9 @@ export default async function RootLayout({
 	children: React.ReactNode;
 	modal: React.ReactNode;
 }>) {
-	const { getDiscs } = useApi();
-	const discs = await getDiscs();
+	const discs = await API.getDiscs();
+	const imageUrls = discs.map(({ pic }) => pic).filter(pic => !!pic);
+	await API.fetchMany(imageUrls);
 	return (
 		<html lang="en">
 			<body className={inter.className}>

diff --git a/src/components/DiscDetail.tsx b/src/components/DiscDetail.tsx
@@ -46,7 +46,8 @@ export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
 					</div>
 				</div>
 				<div className="disc-detail-img-container">
-					<Image src={pic} alt={name} width={400} height={340} className="disc-detail-img" />
+					{/* eslint-disable-next-line @next/next/no-img-element */}
+					<img src={pic} alt={name} className="disc-detail-img" />
 				</div>
 			</div>
 		</Modal>

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
diff --git a/src/hooks/useNotification.ts b/src/hooks/useNotification.ts
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -0,0 +1,26 @@
+import { RequestMethod } from "@constants";
+import { config } from "@services";
+
+import type { Disc, RequestParams } from "@types";
+
+const request = async <T = unknown>({ url, method, body, tags }: RequestParams) => {
+	const res = await fetch(url, {
+		method,
+		headers: {
+			Authorization: `Bearer ${config.API_KEY}`
+		},
+		body: JSON.stringify(body),
+		next: { tags }
+	});
+	return res.json() as Promise<T>;
+};
+
+export const API = {
+	getDiscs: async () =>
+		request<Disc[]>({
+			url: `${config.API_URL}/disc`,
+			method: RequestMethod.GET,
+			tags: ["disc"]
+		}),
+	fetchMany: async (urls: string[]) => Promise.allSettled(urls.map(url => fetch(url, { next: { tags: ["image"] } })))
+};
diff --git a/src/services/index.ts b/src/services/index.ts
@@ -1 +1,2 @@
+export * from "./api";
 export * from "./config";
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -10,6 +10,14 @@ export type Config = {
 
 export type RequestMethodOption = keyof typeof RequestMethod;
 
+export type RequestParams = {
+	url: string;
+	method: RequestMethodOption;
+	accept?: string;
+	body?: unknown;
+	tags?: string[];
+};
+
 export type Disc = {
 	id: string;
 	name: string;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from "./api";
		export * from "./config";