perf: optimize serverless execution, edge caching, and locale hydration

Author: O2sa

src/app/api/leaderboard/route.ts

@@ -16,7 +16,14 @@ export async function GET(request: Request) {
 
   try {
     const result = await getLeaderboardResult(country);
-    return NextResponse.json({ success: true, ...result });
+    return NextResponse.json(
+      { success: true, ...result },
+      {
+        headers: {
+          "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
+        },
+      },
+    );
   } catch (err) {
     console.error("Leaderboard DB query failed:", err);
 

src/app/api/user/[username]/route.ts

@@ -20,7 +20,14 @@ export async function GET(request: Request, { params }: { params: Promise<{ user
 
   try {
     const { user, location } = await getUserProfile(trimmed, selectedLanguages);
-    return NextResponse.json({ success: true, user, location });
+    return NextResponse.json(
+      { success: true, user, location },
+      {
+        headers: {
+          "Cache-Control": "public, s-maxage=1800, stale-while-revalidate=86400",
+        },
+      },
+    );
   } catch (error: unknown) {
     console.error("User profile fetch error:", error);
     return formatApiErrorResponse(error);

src/app/layout.tsx

@@ -99,7 +99,7 @@ export const metadata: Metadata = {
 export default async function RootLayout({ children }: { children: ReactNode }) {
   const cookieStore = await cookies();
   const headerStore = await headers();
-  const cookieLocale = cookieStore.get(LOCALE_COOKIE)?.value;
+  const cookieLocale = cookieStore.get(LOCALE_COOKIE)?.value || headerStore.get("x-locale");
   const initialLocale = isSupportedLocale(cookieLocale)
     ? cookieLocale
     : parseAcceptLanguage(headerStore.get("accept-language"), supportedLocales, DEFAULT_LOCALE);

src/app/leaderboard/[country]/page.tsx

@@ -91,8 +91,13 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+export const revalidate = 3600; // Cache on Vercel Edge CDN for 1 hour via ISR
+export const dynamicParams = true;
+
 export async function generateStaticParams() {
-  return countries.map((country) => ({ country: country.slug }));
+  // Pre-render the top 20 most visited countries at build time.
+  // Other countries are generated on-demand upon first visit and cached by ISR.
+  return countries.slice(0, 20).map((country) => ({ country: country.slug }));
 }
 
 export default async function CountryLeaderboardPage({ params }: Props) {

src/app/scoring-methodology/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import type { Metadata } from "next";
 import { JsonLd } from "@/components/seo/json-ld";
 import { ScoringMethodologyPageClient } from "@/features/scoring";
@@ -68,7 +69,9 @@ export default function ScoringMethodologyPage() {
   return (
     <>
       <JsonLd data={faqSchema} />
-      <ScoringMethodologyPageClient />
+      <Suspense fallback={<div className="min-h-screen" />}>
+        <ScoringMethodologyPageClient />
+      </Suspense>
     </>
   );
 }

src/app/user/[username]/page.tsx

@@ -21,6 +21,9 @@ type CountryInfo = {
 
 const countries = countriesData as CountryInfo[];
 
+export const revalidate = 1800; // Cache user profile on Edge CDN for 30 minutes via ISR
+export const dynamicParams = true;
+
 type Props = {
   params: Promise<{ username: string }>;
   searchParams?: Promise<{ country?: string }>;

src/lib/db/db-store.ts

@@ -67,10 +67,12 @@ function getPoolConfig(): PoolConfig {
     );
   }
 
+  const isServerless = Boolean(process.env.VERCEL || process.env.AWS_LAMBDA_FUNCTION_NAME);
+
   return {
     connectionString,
-    max: 10,
-    idleTimeoutMillis: 30_000,
+    max: isServerless ? 2 : 10,
+    idleTimeoutMillis: isServerless ? 10_000 : 30_000,
     connectionTimeoutMillis: 5_000,
   };
 }

src/lib/i18n/provider-hook.ts

@@ -3,14 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import arMessages from "@/locales/ar.json";
 import enMessages from "@/locales/en.json";
-import {
-  DEFAULT_LOCALE,
-  LOCALE_COOKIE,
-  isSupportedLocale,
-  localeMeta,
-  supportedLocales,
-  type Locale,
-} from "./core";
+import { DEFAULT_LOCALE, LOCALE_COOKIE, localeMeta, supportedLocales, type Locale } from "./core";
 
 type Messages = Record<string, string>;
 
@@ -32,17 +25,8 @@ function persistLocale(locale: Locale) {
 }
 
 export function useI18nProvider(initialLocale: Locale = DEFAULT_LOCALE) {
-  const getInitialLocale = () => {
-    if (typeof window !== "undefined") {
-      const stored = window.localStorage.getItem(LOCALE_COOKIE);
-      if (isSupportedLocale(stored)) return stored;
-    }
-    return initialLocale;
-  };
-
-  const initialLoc = getInitialLocale();
-  const [locale, setLocaleState] = useState<Locale>(initialLoc);
-  const [messages, setMessages] = useState<Messages>(() => messagesByLocale[initialLoc]);
+  const [locale, setLocaleState] = useState<Locale>(initialLocale);
+  const [messages, setMessages] = useState<Messages>(() => messagesByLocale[initialLocale]);
   const [ready, setReady] = useState<boolean>(true);
 
   const changeLocale = useCallback((next: Locale) => {

src/middleware.ts

@@ -9,7 +9,7 @@ import {
 } from "@/lib/i18n/core";
 
 export function middleware(request: NextRequest) {
-  const response = NextResponse.next();
+  const requestHeaders = new Headers(request.headers);
   const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
 
   if (!isSupportedLocale(cookieLocale)) {
@@ -18,11 +18,29 @@ export function middleware(request: NextRequest) {
       supportedLocales,
       DEFAULT_LOCALE,
     );
+    requestHeaders.set("x-locale", locale);
 
-    response.cookies.set(LOCALE_COOKIE, locale, { path: "/" });
+    const response = NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    });
+
+    response.cookies.set(LOCALE_COOKIE, locale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365,
+      sameSite: "lax",
+    });
+
+    return response;
   }
 
-  return response;
+  requestHeaders.set("x-locale", cookieLocale);
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
 }
 
 // Run only on routes that produce HTML or read the cookie. Skip Next.js