Sen kıdemli bir yazılım mühendisisin.

Next.js App Router projesinde Server Component + Client Component mimarisini uygula.

AMAÇ:

Sayfa ilk açılışta veriyle birlikte gelsin. Client-side initial fetch olmasın.

KURALLAR:

SERVER COMPONENT (page.tsx):

- auth() ile token al

- Tüm GET isteklerini Promise.all ile paralel çek

- Hata durumunda console.error ile logla, güvenli fallback dön

- Veriyi Client Component'e props olarak gönder

Örnek:

const [veri1, veri2] = await Promise.all([

  api.get<T[]>('/api/...', token).catch((e) => { console.error('endpoint', e); return [] }),

  api.get<T>('/api/...', token).catch((e) => { console.error('endpoint', e); return null }),

])

return <XClient token={token} initialVeri1={veri1} initialVeri2={veri2} />

CLIENT COMPONENT (x-client.tsx):

- "use client"

- Veriyi props ile al, useState(initialData) ile başlat

- loading state ve mount useEffect'i KALDIR

- Sadece: UI render, useState, onClick, POST/PUT/DELETE

KALDIR:

- useEffect içindeki ilk data fetch

- loading/skeleton state'leri

- mount sırasında çağrılan API istekleri

KORU:

- POST / PUT / DELETE client'ta kalır

- Mevcut UI/UX değişmez

- Post-mutasyon refresh fonksiyonları kalabilir, mount'ta çağrılmaz

NEDEN:

API_URL localhost üzerinden çalışır, Cloudflare bypass olur.

Sayfa veriyle birlikte gelir, loading flash olmaz, LCP hızlanır.

Sadece kod üret. Açıklama yazma.