perf: fix TBT/LCP/a11y — disable shader animation, cache APIs, fix images

Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com>

app/api/book-reviews/route.ts

@@ -3,7 +3,9 @@ import { getBookReviews } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
 
 /**
  * GET /api/book-reviews
@@ -25,31 +27,29 @@ export async function GET(request: NextRequest) {
     const locale = searchParams.get('locale') || 'en';
 
     const reviews = await getBookReviews(locale);
-    
+
     if (process.env.NODE_ENV === 'development') {
       console.log(`[API] Book Reviews geladen für ${locale}:`, reviews?.length || 0);
     }
 
     if (reviews && reviews.length > 0) {
-      return NextResponse.json({
-        bookReviews: reviews,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { bookReviews: reviews, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
-    return NextResponse.json({
-      bookReviews: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { bookReviews: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
 
   } catch (error) {
-    console.error('Error loading book reviews:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading book reviews:', error);
+    }
     return NextResponse.json(
-      {
-        bookReviews: null,
-        error: 'Failed to load book reviews',
-        source: 'error'
-      },
+      { bookReviews: null, error: 'Failed to load book reviews', source: 'error' },
       { status: 500 }
     );
   }

app/api/content/page/route.ts

@@ -2,6 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { getContentByKey } from "@/lib/content";
 import { getContentPage } from "@/lib/directus";
 
+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const key = searchParams.get("key");
@@ -15,21 +17,32 @@ export async function GET(request: NextRequest) {
     // 1) Try Directus first
     const directusPage = await getContentPage(key, locale);
     if (directusPage) {
-      return NextResponse.json({
-        content: {
-          title: directusPage.title,
-          slug: directusPage.slug,
-          locale: directusPage.locale || locale,
-          content: directusPage.content,
+      return NextResponse.json(
+        {
+          content: {
+            title: directusPage.title,
+            slug: directusPage.slug,
+            locale: directusPage.locale || locale,
+            content: directusPage.content,
+          },
+          source: "directus",
         },
-        source: "directus",
-      });
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
     // 2) Fallback: PostgreSQL
     const translation = await getContentByKey({ key, locale });
-    if (!translation) return NextResponse.json({ content: null });
-    return NextResponse.json({ content: translation, source: "postgresql" });
+    if (!translation) {
+      return NextResponse.json(
+        { content: null },
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+    return NextResponse.json(
+      { content: translation, source: "postgresql" },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
   } catch (error) {
     // If DB isn't migrated/available, fail soft so the UI can fall back to next-intl strings.
     if (process.env.NODE_ENV === "development") {

app/api/hobbies/route.ts

@@ -3,7 +3,9 @@ import { getHobbies } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
 
 /**
  * GET /api/hobbies
@@ -28,26 +30,24 @@ export async function GET(request: NextRequest) {
     const hobbies = await getHobbies(locale);
 
     if (hobbies && hobbies.length > 0) {
-      return NextResponse.json({
-        hobbies,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { hobbies, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
     // Fallback: return empty (component will use hardcoded fallback)
-    return NextResponse.json({
-      hobbies: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { hobbies: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
 
   } catch (error) {
-    console.error('Error loading hobbies:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading hobbies:', error);
+    }
     return NextResponse.json(
-      { 
-        hobbies: null, 
-        error: 'Failed to load hobbies',
-        source: 'error' 
-      },
+      { hobbies: null, error: 'Failed to load hobbies', source: 'error' },
       { status: 500 }
     );
   }

app/api/messages/route.ts

@@ -1,13 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getMessages } from "@/lib/directus";
 
+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const locale = searchParams.get("locale") || "en";
 
   try {
     const messages = await getMessages(locale);
-    return NextResponse.json({ messages });
+    return NextResponse.json(
+      { messages },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
   } catch {
     return NextResponse.json({ messages: {} }, { status: 500 });
   }

app/api/snippets/route.ts

@@ -1,6 +1,8 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getSnippets } from '@/lib/directus';
 
+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url);
@@ -9,9 +11,10 @@ export async function GET(request: NextRequest) {
     
     const snippets = await getSnippets(limit, featured);
     
-    return NextResponse.json({
-      snippets: snippets || []
-    });
+    return NextResponse.json(
+      { snippets: snippets || [] },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
   } catch (_error) {
     return NextResponse.json({ error: 'Failed to fetch snippets' }, { status: 500 });
   }

app/api/tech-stack/route.ts

@@ -3,14 +3,15 @@ import { getTechStack } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
+export const revalidate = 300;
 
 const CACHE_TTL = 300; // 5 minutes
 
 /**
  * GET /api/tech-stack
- * 
+ *
  * Loads Tech Stack from Directus with fallback to static data
- * 
+ *
  * Query params:
  *   - locale: en or de (default: en)
  */