perf: sunucu waterfall'ları ve blocking analitik düzeltildi (Faz 1)

Vercel React Best Practices denetimi, sunucu tarafı: - odeme: analitik olayı after() ile yanıt sonrasına alındı; ucuz ürün doğrulaması oturum turundan öne çekildi; sonuç kartında oturum+sipariş paralel okunuyor - /api/soru POST: gövde+oturum ve 3 bağımsız sorgu Promise.all'a bağlandı - rehber: prod'da globalThis cache + özetler için frontmatter fast-path (24 dosya okuma + marked.parse her render'da tekrarlanıyordu); arama kutusuna giden payload RehberAramaKaydi'ya kırpıldı (tarih serileşmiyor) - /sonuc hattı: ProgramListeSatiri (fakulte/puan2025 client'a serileşmiyor) - katalog: universite/bolum listelerinde O(n²) filtreler tek geçişe indi - sira-gerekli + katalog-arama: effect'te setState kalktı (lint yeşil) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-08 13:48:27 +03:00
parent d2732828cc
commit 53edb2b307
15 changed files with 256 additions and 99 deletions
--- a/src/features/katalog/components/bolum-listesi.tsx
+++ b/src/features/katalog/components/bolum-listesi.tsx
@@ -34,15 +34,26 @@ function KategoriGruplari({
  bolumler: BolumOzet[];
  seviye: "lisans" | "onlisans";
 }) {
-  const kalanlar = new Set(bolumler.map((b) => b.slug));
-  const gruplar = KATEGORILER.map((kategori) => {
-    const uyeler = bolumler.filter((b) =>
-      (b.kategoriler as readonly string[]).includes(kategori),
-    );
-    for (const b of uyeler) kalanlar.delete(b.slug);
-    return { kategori: kategori as string, uyeler };
-  }).filter((g) => g.uyeler.length > 0);
-  const diger = bolumler.filter((b) => kalanlar.has(b.slug));
+  // Tek geçişte kategori index'i — kategori×bölüm çapraz filter yerine.
+  // Bir bölüm birden çok kategoride görünebilir; hiçbirinde yoksa "Diğer"e düşer.
+  const uyeMap = new Map<string, BolumOzet[]>();
+  const diger: BolumOzet[] = [];
+  const gecerli = new Set<string>(KATEGORILER);
+  for (const b of bolumler) {
+    let eslesti = false;
+    for (const kategori of b.kategoriler as readonly string[]) {
+      if (!gecerli.has(kategori)) continue;
+      const grup = uyeMap.get(kategori);
+      if (grup) grup.push(b);
+      else uyeMap.set(kategori, [b]);
+      eslesti = true;
+    }
+    if (!eslesti) diger.push(b);
+  }
+  const gruplar = KATEGORILER.filter((k) => uyeMap.has(k)).map((kategori) => ({
+    kategori: kategori as string,
+    uyeler: uyeMap.get(kategori)!,
+  }));
  if (diger.length > 0) gruplar.push({ kategori: "Diğer", uyeler: diger });

  return (
--- a/src/features/katalog/components/katalog-arama.tsx
+++ b/src/features/katalog/components/katalog-arama.tsx
@@ -1,13 +1,20 @@
 "use client";

-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { AramaFunnelKarti } from "@/components/arama-funnel-karti";
 import { RehberKapak } from "@/features/rehber/components/rehber-kapak";
 import { UniLogo } from "@/components/uni-logo";
 import { aramaNormalize, eslesmePuani } from "@/lib/arama";
-import type { RehberOzet } from "@/lib/rehber";
+import type { RehberAramaKaydi } from "@/lib/rehber";
 import {
  profilDuzenlemeyiAc,
  sonucaGitIste,
@@ -60,6 +67,18 @@ const BOS_SONUCLAR: AramaSonuclari = { bolumler: [], universiteler: [] };
 const REHBER_SONUC_SINIRI = 4;
 const sayi = (deger: number) => deger.toLocaleString("tr-TR");

+// Platform değişmez — abonelik gerektirmeyen dış değer (useSyncExternalStore)
+const bosAbonelik = () => () => {};
+const macMiSunucu = () => true;
+function macMiOku(): boolean {
+  const platform =
+    (navigator as { userAgentData?: { platform?: string } }).userAgentData
+      ?.platform ??
+    navigator.platform ??
+    "";
+  return /mac|iphone|ipad/i.test(platform);
+}
+
 const KESFET_TONLARI = {
  slate: {
    pencere: "border-slate-200/80 bg-white",
@@ -81,7 +100,7 @@ const KESFET_TONLARI = {
  },
 } as const;

-export function KatalogArama({ rehberler }: { rehberler: RehberOzet[] }) {
+export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
  const router = useRouter();
  const profil = useTercihProfili();
  const [acik, setAcik] = useState(false);
@@ -95,7 +114,10 @@ export function KatalogArama({ rehberler }: { rehberler: RehberOzet[] }) {
  const [sorgu, setSorgu] = useState("");
  const [sonuclar, setSonuclar] = useState<AramaSonuclari>(BOS_SONUCLAR);
  const [yukleniyor, setYukleniyor] = useState(false);
-  const [macMi, setMacMi] = useState(true);
+  // Kısayol etiketi (⌘/Ctrl) platforma bağlı sabit bir dış değer: effect'te
+  // setState yerine useSyncExternalStore — SSR'da ⌘ (eski varsayılan),
+  // hydration sonrası gerçek platform.
+  const macMi = useSyncExternalStore(bosAbonelik, macMiOku, macMiSunucu);
  const inputRef = useRef<HTMLInputElement>(null);
  const kaydirmaRef = useRef<HTMLDivElement>(null);
  const [kenarBlur, setKenarBlur] = useState({ ust: false, alt: false });
@@ -139,15 +161,6 @@ export function KatalogArama({ rehberler }: { rehberler: RehberOzet[] }) {
    sonuclar.universiteler.length > 0 ||
    rehberSonuclari.length > 0;

-  useEffect(() => {
-    const platform =
-      (navigator as { userAgentData?: { platform?: string } }).userAgentData
-        ?.platform ??
-      navigator.platform ??
-      "";
-    setMacMi(/mac|iphone|ipad/i.test(platform));
-  }, []);
-
  useEffect(() => {
    function kisayolDinle(event: KeyboardEvent) {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
@@ -722,7 +735,7 @@ function RehberSonucKarti({
  yazi,
  onSec,
 }: {
-  yazi: RehberOzet;
+  yazi: RehberAramaKaydi;
  onSec: () => void;
 }) {
  return (
--- a/src/features/katalog/components/universite-listesi.tsx
+++ b/src/features/katalog/components/universite-listesi.tsx
@@ -36,13 +36,15 @@ function UniLinkleri({ uniler }: { uniler: UniOzet[] }) {

 export function UniversiteKatalogu() {
  const hepsi = getAllUniversiteler();
-  const devlet = hepsi.filter((u) => u.unitur === "DEVLET");
-  const vakif = hepsi.filter(
-    (u) => u.unitur != null && ["VAKIF", "VAKIF MYO"].includes(u.unitur),
-  );
-  const digerUniler = hepsi.filter(
-    (u) => !devlet.includes(u) && !vakif.includes(u),
-  );
+  // Tek geçişte üç grup — filter×3 + includes'lı O(n²) tarama yerine
+  const devlet: UniOzet[] = [];
+  const vakif: UniOzet[] = [];
+  const digerUniler: UniOzet[] = [];
+  for (const u of hepsi) {
+    if (u.unitur === "DEVLET") devlet.push(u);
+    else if (u.unitur === "VAKIF" || u.unitur === "VAKIF MYO") vakif.push(u);
+    else digerUniler.push(u);
+  }

  return (
    <>
--- a/src/features/liste/components/program-tablosu.tsx
+++ b/src/features/liste/components/program-tablosu.tsx
@@ -13,7 +13,12 @@ import {
  Scale,
  ShieldCheck,
 } from "lucide-react";
-import type { DilimKey, Program, PuanTuruKey, RankResults } from "@/types/yokatlas";
+import type {
+  DilimKey,
+  ProgramListeSatiri,
+  PuanTuruKey,
+  RankResultsListe,
+} from "@/types/yokatlas";
 import { riskHesapla, type RiskSeviyesi } from "@/lib/risk";
 import { bolumSayfaSlug, uniSayfaSlug } from "@/lib/slug";
 import {
@@ -70,7 +75,7 @@ const RISK_NOKTA: Record<RiskSeviyesi, string> = {
  riskli: "bg-red-500",
 };

-const BOS_EKSTRA: Record<DilimKey, Program[]> = {
+const BOS_EKSTRA: Record<DilimKey, ProgramListeSatiri[]> = {
  hayal: [],
  dengeli: [],
  garanti: [],
@@ -78,7 +83,7 @@ const BOS_EKSTRA: Record<DilimKey, Program[]> = {

 // Dengeli ve hayal dilimleri tamamen boşsa (sıralama çok gerideyse) boş bir
 // "dengeli" sekmesi yerine dolu olan "garanti" ile açılır.
-function varsayilanDilim(sonuclar: RankResults): DilimKey {
+function varsayilanDilim(sonuclar: RankResultsListe): DilimKey {
  return sonuclar.toplam.dengeli === 0 && sonuclar.toplam.hayal === 0
    ? "garanti"
    : "dengeli";
@@ -89,7 +94,7 @@ export function ProgramTablosu({
  adaySira,
  tur,
 }: {
-  sonuclar: RankResults;
+  sonuclar: RankResultsListe;
  adaySira: number;
  tur: PuanTuruKey;
 }) {
@@ -120,7 +125,7 @@ export function ProgramTablosu({
        `/api/programlar?sira=${adaySira}&tur=${tur}&dilim=${dilim}&offset=${offset}`,
      );
      if (!res.ok) return;
-      const veri = (await res.json()) as { programlar: Program[] };
+      const veri = (await res.json()) as { programlar: ProgramListeSatiri[] };
      // Aynı sayfanın iki kez istenmesine karşı id bazında tekilleştir
      setEkstra((mevcut) => {
        const eldekiler = new Set(
@@ -232,7 +237,7 @@ function ProgramSatiri({
  adaySira,
  tur,
 }: {
-  program: Program;
+  program: ProgramListeSatiri;
  adaySira: number;
  tur: PuanTuruKey;
 }) {
--- a/src/features/liste/liste-queries.ts
+++ b/src/features/liste/liste-queries.ts
@@ -1,12 +1,45 @@
 import "server-only";
 import { searchByRank } from "@/lib/db";
-import type { PuanTuruKey, RankResults } from "@/types/yokatlas";
+import type {
+  Program,
+  ProgramListeSatiri,
+  PuanTuruKey,
+  RankResultsListe,
+} from "@/types/yokatlas";
+
+// Tabloda kullanılmayan alanlar (fakulte, puan2025) client'a serileşmesin.
+// Alanlar tek tek seçilir: Program'a alan eklenirse ProgramListeSatiri
+// üzerinden derleyici burada da karar vermeye zorlar.
+export function programOzetle(p: Program): ProgramListeSatiri {
+  return {
+    id: p.id,
+    isim: p.isim,
+    universite: p.universite,
+    unitur: p.unitur,
+    il: p.il,
+    tur: p.tur,
+    sure: p.sure,
+    sira2025: p.sira2025,
+    sira2024: p.sira2024,
+    sira2023: p.sira2023,
+    sira2022: p.sira2022,
+    sira2021: p.sira2021,
+    kontenjan2025: p.kontenjan2025,
+    yerlesen2025: p.yerlesen2025,
+  };
+}

 // /sonuc'un ham tablosu: yalnızca sıralamayla ulaşılabilen programlar,
 // hayal/dengeli/garanti dilimli, dilim başına ilk 20 satır.
 export function siraylaProgramAra(
  sira: number,
  tur: PuanTuruKey,
-): RankResults {
-  return searchByRank(sira, tur, { limitPerBucket: 20 });
+): RankResultsListe {
+  const ham = searchByRank(sira, tur, { limitPerBucket: 20 });
+  return {
+    hayal: ham.hayal.map(programOzetle),
+    dengeli: ham.dengeli.map(programOzetle),
+    garanti: ham.garanti.map(programOzetle),
+    toplam: ham.toplam,
+  };
 }
--- a/src/features/odeme/components/odeme-sonuc-karti.tsx
+++ b/src/features/odeme/components/odeme-sonuc-karti.tsx
@@ -14,9 +14,11 @@ export async function OdemeSonucKarti({ siparis }: { siparis?: string }) {
  const geriDonus = siparis
    ? `/odeme/sonuc?siparis=${encodeURIComponent(siparis)}`
    : "/paket";
-  const session = await verifySession(geriDonus);
-
-  const order = siparis ? await siparisGetir(siparis) : null;
+  // Oturum ve sipariş sorgusu bağımsız; sahiplik kontrolü aşağıda yapılıyor
+  const [session, order] = await Promise.all([
+    verifySession(geriDonus),
+    siparis ? siparisGetir(siparis) : Promise.resolve(null),
+  ]);

  // Yalnızca kendi siparişi görüntülenebilir
  const sahibiMi = order?.userId === session.user.id;
--- a/src/features/odeme/odeme-actions.ts
+++ b/src/features/odeme/odeme-actions.ts
@@ -14,11 +14,12 @@ export async function baslatOdeme(
  _prev: OdemeBaslatDurum,
  formData: FormData,
 ): Promise<OdemeBaslatDurum> {
-  const session = await verifySession("/paket");
+  // Ucuz senkron doğrulama pahalı oturum turundan önce
  const product = formData.get("urun");
  if (product !== "paket" && product !== "topup") {
    return { error: "Geçersiz ürün." };
  }
+  const session = await verifySession("/paket");
  const urun = URUNLER[product];

  const orderId = crypto.randomUUID();
--- a/src/features/rehber/rehber-queries.ts
+++ b/src/features/rehber/rehber-queries.ts
@@ -7,5 +7,7 @@ export {
  getAllRehberler,
  getAllRehberSlugs,
  getRehber,
+  getRehberAramaKayitlari,
  type RehberOzet,
+  type RehberAramaKaydi,
 } from "@/lib/rehber";
--- a/src/features/sihirbaz/components/sira-gerekli.tsx
+++ b/src/features/sihirbaz/components/sira-gerekli.tsx
@@ -3,7 +3,7 @@
 // /sonuc?sira= yokken: kayıtlı profil varsa oraya taşı; yoksa kapıyı aç.
 // Sıra bilgisi localStorage'daki TercihProfili ile tüm uygulamada ortak.

-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { ArrowLeft, Trophy } from "lucide-react";
@@ -18,17 +18,14 @@ import {
 export function SiraGerekli() {
  const router = useRouter();
  const { profil, profilYuklendi } = useProfilKapisi();
-  const [yonleniyor, setYonleniyor] = useState(false);

+  // "Yönleniyor" durumu ayrı state gerektirmez: profil varken aşağıdaki koşul
+  // zaten bekleme ekranını gösteriyor; effect yalnızca yönlendirmeyi yapar.
  useEffect(() => {
-    if (!profilYuklendi) return;
-    if (profil) {
-      setYonleniyor(true);
-      router.replace(sonucHref(profil));
-    }
+    if (profilYuklendi && profil) router.replace(sonucHref(profil));
  }, [profil, profilYuklendi, router]);

-  if (!profilYuklendi || yonleniyor || profil) {
+  if (!profilYuklendi || profil) {
    return (
      <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
        <p className="text-sm text-slate-500">Sıralaman kontrol ediliyor…</p>