Using Cache Components (#218)

* Using Cache Components

- Updated various dependencies in `package.json` and `bun.lock`, including `@graphql-codegen` packages and `ai`.
- Added caching configuration in `next.config.ts` and implemented caching strategies in multiple components to improve performance.
- Refactored locale handling in `locale-switcher.tsx` and updated routing logic in `sitemap.ts` and layout files.
- Removed unused service worker files to streamline the project.

* Refactor static parameter generation in layout and page components

- Updated the `generateStaticParams` function in `layout.tsx` and `page.tsx` to use `flatMap` instead of `map` for improved handling of locale and sheet combinations.

Author: mdugue

app/[locale]/[sheet]/layout.tsx

@@ -1,13 +1,13 @@
+"use cache";
 import type { Metadata } from "next";
+import { cacheLife } from "next/cache";
 import DocumentSheet from "@/document-sheet";
 import { i18n } from "../../i18n-config";
 
-export const runtime = "edge";
-export const revalidate = 60; // 1 minute
-
 type Props = LayoutProps<"/[locale]/[sheet]">;
 
-export default function SheetLayout({ children }: Props) {
+export default async function SheetLayout({ children }: Props) {
+	cacheLife("hours");
 	return <DocumentSheet>{children}</DocumentSheet>;
 }
 
@@ -47,3 +47,10 @@ const createTitle = (sheet: string) =>
 		.split("-")
 		.map((word) => word[0].toUpperCase() + word.slice(1))
 		.join(" ");
+
+export async function generateStaticParams() {
+	const sheets = ["skill-profile", "cv", "legal", "privacy"] as const;
+	return i18n.locales.flatMap((locale) =>
+		sheets.map((sheet) => ({ locale, sheet }))
+	);
+}

app/[locale]/[sheet]/page.tsx

@@ -1,16 +1,17 @@
+"use cache";
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
 import { INLINES } from "@contentful/rich-text-types";
 import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
 import type { AllInOnePageQuery } from "gql/graphql";
+import { cacheLife } from "next/cache";
 import type { Article, WithContext } from "schema-dts";
 import { DocumentSheetContent } from "@/document-sheet";
 import { graphqlClient } from "@/graphql-client";
+import { i18n } from "@/i18n-config";
 import { pageQuery } from "../page-query";
 
-export const runtime = "edge";
-export const revalidate = 60; // 1 minute
-
 export default async function Page({ params }: PageProps<"/[locale]/[sheet]">) {
+	cacheLife("hours");
 	const { sheet, locale } = await params;
 
 	const { allInOnePageCollection } =
@@ -77,3 +78,10 @@ const jsonLd: WithContext<Article> = {
 	articleBody:
 		"Manuel Dugué is a media computer scientist born in Berlin with German and French roots. He is passionate about sports, music, photography, typography, architecture, and cooking. Manuel is a language enthusiast, fluent in German, French, English, and Spanish, with basic knowledge of Portuguese and Dutch. He has programming skills in TypeScript, JavaScript, HTML, and more, and loves working with frameworks like React, D3.js, and Next.js. Manuel has had an exciting career working on projects like digital exhibitions, family trees, and an online shop for garden culture. He has also done some cool stuff with Android tablets for seniors and interactive presentation films. Manuel has a diploma in Media Informatics from TU Dresden and a research thesis on 'materiality and interaction.' He has won awards like the arctic code vault contributor and a couple of photo competitions. Manuel is a tech-savvy, creative, and multilingual individual.",
 };
+
+export async function generateStaticParams() {
+	const sheets = ["skill-profile", "cv", "legal", "privacy"] as const;
+	return i18n.locales.flatMap((locale) =>
+		sheets.map((sheet) => ({ locale, sheet }))
+	);
+}

app/[locale]/layout.tsx

@@ -1,3 +1,4 @@
+"use cache";
 import {
 	RiCupFill,
 	RiGithubFill,
@@ -6,6 +7,7 @@ import {
 	RiTwitterXFill,
 } from "@remixicon/react";
 import type { Metadata } from "next";
+import { cacheLife } from "next/cache";
 import {
 	Bungee,
 	Bungee_Inline,
@@ -24,9 +26,6 @@ import LocaleSwitcher from "@/locale-switcher";
 import "./globals.css";
 import { ErrorBoundary } from "react-error-boundary";
 
-export const runtime = "edge";
-export const revalidate = 60; // 1 minute
-
 const montserrat = Montserrat({
 	subsets: ["latin"],
 	variable: "--font-montserrat",
@@ -52,6 +51,7 @@ export default async function MyApp({
 	children,
 	params,
 }: LayoutProps<"/[locale]">) {
+	cacheLife("hours");
 	const { locale } = await params;
 	assertLocale(locale);
 	return (
@@ -313,3 +313,7 @@ export async function generateMetadata({
 		],
 	};
 }
+
+export async function generateStaticParams() {
+	return i18n.locales.map((locale) => ({ locale }));
+}

app/[locale]/page.tsx

@@ -1,6 +1,3 @@
-export const runtime = "edge";
-export const revalidate = 60; // 1 minute
-
 export default function Page() {
 	return;
 }

app/landing-page-quote.tsx

@@ -1,7 +1,9 @@
+"use cache";
 import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
 import { RiOpenaiFill } from "@remixicon/react";
 import { kv } from "@vercel/kv";
 import type { AllInOnePageQuery } from "gql/graphql";
+import { cacheLife } from "next/cache";
 import Link from "next/link";
 import OpenAi from "openai";
 import { Suspense } from "react";
@@ -12,17 +14,10 @@ import type { Locale } from "@/i18n-config";
 
 const openai = new OpenAi({
 	apiKey: process.env.OPENAI_API_KEY,
-	fetch: (input, init) =>
-		fetch(input, {
-			...init,
-			next: {
-				/*1 day: 60 * 60 * 24*/
-				revalidate: 86_400,
-			},
-		}),
 });
 
 export default async function Quote(props: { locale: Locale }) {
+	cacheLife("days");
 	const { locale } = props;
 	const { allInOnePageCollection } =
 		await graphqlClient.request<AllInOnePageQuery>(pageQuery, {

app/locale-switcher.tsx

@@ -1,23 +1,11 @@
-"use client";
-
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import { i18n, type Locale } from "../app/i18n-config";
 
 export default function LocaleSwitcher(props: {
 	className?: string;
 	currentLocale: Locale;
 }) {
 	const { currentLocale } = props;
-	const pathName = usePathname();
-	const redirectedPathName = (locale: string) => {
-		if (!pathName) {
-			return "/";
-		}
-		const segments = pathName.split("/");
-		segments[1] = locale;
-		return segments.join("/");
-	};
 
 	return (
 		<div>
@@ -30,7 +18,7 @@ export default function LocaleSwitcher(props: {
 									? "text-teal-500"
 									: "hover:text-gray-400"
 							}`}
-							href={redirectedPathName(locale)}
+							href={`/${locale}`}
 						>
 							{locale}
 						</Link>

app/sitemap.ts

@@ -1,10 +1,10 @@
+"use cache";
 import type { MetadataRoute } from "next";
+import { cacheLife } from "next/cache";
 import { i18n } from "./i18n-config";
 
-export const runtime = "edge";
-export const revalidate = 86_400; // 60 * 60 * 24 1 day
-
-export default function sitemap(): MetadataRoute.Sitemap {
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+	cacheLife("days");
 	return i18n.locales.flatMap((locale) => [
 		{ url: `https://manuel.fyi/${locale}`, lastModified: new Date() },
 		{