fix: eliminate 2s LCP rendering delay from Directus timeout on Hero

The Hero server component awaited getMessages(locale) which called Directus
with a 2-second timeout. On testing.dk0.dev (or when Directus is unreachable),
this blocked the entire Hero render for ~2s → LCP 3.0s / 2320ms rendering delay.

Changes:
- Hero.tsx: remove getMessages() call entirely; use t() for all strings
- messages/en.json + de.json: add hero.badge, hero.line1, hero.line2 keys
- lib/i18n-loader.ts: invert lookup order — JSON first, Directus only as
  override for keys absent from JSON. Previously Directus was tried first
  for every key, causing ~49 parallel network requests per page load in
  HomePageServer (aboutT + projectsT + contactT + footerT translations).
  Now all JSON-backed keys return instantly without any network I/O.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/__tests__/components/Hero.test.tsx

@@ -5,6 +5,9 @@ import Hero from '@/app/components/Hero';
 jest.mock('next-intl/server', () => ({
   getTranslations: () => Promise.resolve((key: string) => {
     const messages: Record<string, string> = {
+      badge: 'Student & Self-Hoster',
+      line1: 'Building',
+      line2: 'Stuff.',
       description: 'Dennis is a student and passionate self-hoster.',
       ctaWork: 'View My Work',
       ctaContact: 'Get in touch',
@@ -13,11 +16,6 @@ jest.mock('next-intl/server', () => ({
   }),
 }));
 
-// Mock directus getMessages
-jest.mock('@/lib/directus', () => ({
-  getMessages: () => Promise.resolve({}),
-}));
-
 // Mock next/image
 interface ImageProps {
   src: string;

app/components/Hero.tsx

@@ -1,18 +1,12 @@
 import { getTranslations } from "next-intl/server";
 import Image from "next/image";
-import { getMessages } from "@/lib/directus";
 
 interface HeroProps {
   locale: string;
 }
 
-export default async function Hero({ locale }: HeroProps) {
+export default async function Hero({ locale: _locale }: HeroProps) {
-  const [t, cmsMessages] = await Promise.all([
+  const t = await getTranslations("home.hero");
-    getTranslations("home.hero"),
-    getMessages(locale).catch(() => ({} as Record<string, string>)),
-  ]);
-
-  const getLabel = (key: string, fallback: string) => cmsMessages[key] || fallback;
 
   return (
     <section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
@@ -29,15 +23,15 @@ export default async function Hero({ locale }: HeroProps) {
           <div className="flex-1 text-center xl:text-left space-y-6 sm:space-y-8 md:space-y-10">
             <div className="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 shadow-sm animate-[fadeIn_0.5s_ease-out]">
               <span className="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-emerald-500 rounded-full animate-pulse" />
-              <span className="font-mono text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] sm:tracking-[0.3em] text-stone-500">{getLabel("hero.badge", "Student & Self-Hoster")}</span>
+              <span className="font-mono text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] sm:tracking-[0.3em] text-stone-500">{t("badge")}</span>
             </div>
 
             <h1 className="text-[2.75rem] sm:text-6xl md:text-8xl lg:text-[9.5rem] font-black tracking-tighter leading-[0.85] text-stone-900 dark:text-stone-50 uppercase">
               <span className="block">
-                {getLabel("hero.line1", "Building")}
+                {t("line1")}
               </span>
               <span className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-2 sm:pb-4">
-                {getLabel("hero.line2", "Stuff.")}
+                {t("line2")}
               </span>
             </h1>
 

lib/i18n-loader.ts

@@ -29,8 +29,12 @@ function getCached(key: string): unknown | null {
 }
 
 /**
- * Get a localized message by key
+ * Get a localized message by key.
- * Tries: Directus (requested locale) → Directus (EN) → JSON (requested locale) → JSON (EN)
+ * Tries: JSON (requested locale) → JSON (EN) → Directus (requested locale) → Directus (EN)
+ *
+ * JSON is checked first so that translation-heavy server components never wait on
+ * a Directus network round-trip for keys that already exist in the message files.
+ * Directus is only queried when the key is absent from JSON (i.e. CMS-only content).
  */
 export async function getLocalizedMessage(
   key: string,
@@ -40,31 +44,16 @@ export async function getLocalizedMessage(
   const cached = getCached(cacheKey);
   if (cached !== null) return cached as string;
 
-  // Try Directus with requested locale
-  const dbValue = await getMessage(key, locale);
-  if (dbValue) {
-    setCached(cacheKey, dbValue);
-    return dbValue;
-  }
-
-  // Fallback to EN in Directus if not EN already
-  if (locale !== 'en') {
-    const dbValueEn = await getMessage(key, 'en');
-    if (dbValueEn) {
-      setCached(cacheKey, dbValueEn);
-      return dbValueEn;
-    }
-  }
-
-  // Fallback to JSON file (normalize locale to 'en' or 'de')
   const normalizedLocale = locale.startsWith('de') ? 'de' : 'en';
+
+  // 1) JSON – requested locale
   const jsonValue = getNestedValue(jsonFallback[normalizedLocale as 'en' | 'de'], key);
   if (jsonValue) {
     setCached(cacheKey, jsonValue);
     return jsonValue;
   }
 
-  // Fallback to EN JSON
+  // 2) JSON – EN fallback
   if (normalizedLocale !== 'en') {
     const jsonValueEn = getNestedValue(jsonFallback['en'], key);
     if (jsonValueEn) {
@@ -73,7 +62,23 @@ export async function getLocalizedMessage(
     }
   }
 
-  // Fallback: return the key itself
+  // 3) Directus – only for keys missing from JSON (CMS-only content)
+  const dbValue = await getMessage(key, locale);
+  if (dbValue) {
+    setCached(cacheKey, dbValue);
+    return dbValue;
+  }
+
+  // 4) Directus – EN fallback
+  if (locale !== 'en') {
+    const dbValueEn = await getMessage(key, 'en');
+    if (dbValueEn) {
+      setCached(cacheKey, dbValueEn);
+      return dbValueEn;
+    }
+  }
+
+  // 5) Return the key itself as last resort
   return key;
 }
 

messages/de.json

@@ -26,6 +26,9 @@
   },
   "home": {
     "hero": {
+      "badge": "Student & Self-Hoster",
+      "line1": "Building",
+      "line2": "Stuff.",
       "features": {
         "f1": "Next.js & Flutter",
         "f2": "Docker Swarm & CI/CD",

messages/en.json

@@ -27,6 +27,9 @@
   ,
   "home": {
     "hero": {
+      "badge": "Student & Self-Hoster",
+      "line1": "Building",
+      "line2": "Stuff.",
       "features": {
         "f1": "Next.js & Flutter",
         "f2": "Docker Swarm & CI/CD",