Next.js'te streaming nedir? loading.tsx ve Suspense ile sayfanın parça parça yüklenmesi nasıl sağlanır?

Streaming, sunucunun HTML'i tek seferde değil hazır oldukça parça parça göndermesidir. Yavaş bir veri kaynağı tüm sayfayı bekletmez; önce iskelet ve hızlı kısımlar gelir, yavaş bileşenler hazır olunca aynı HTTP cevabının devamı olarak akar. TTFB ve FCP iyileşir.

loading.tsx

Bir route klasörüne loading.tsx koymak, o sayfayı otomatik olarak bir <Suspense> ile sarar; navigasyonda anında bu fallback gösterilir.

// app/dashboard/loading.tsx
export default function Loading() {
  return <DashboardSkeleton />;
}

Bileşen bazında Suspense

Daha ince taneli kontrol için yavaş bileşenleri ayrı ayrı sarın:

// app/dashboard/page.tsx (Server Component)
import { Suspense } from "react";

export default function Dashboard() {
  return (
    <>
      <Header />                     {/* hemen gelir */}
      <Suspense fallback={<CardSkeleton />}>
        <Revenue />                  {/* 2 sn süren sorgu */}
      </Suspense>
      <Suspense fallback={<ListSkeleton />}>
        <LatestOrders />             {/* bağımsız akar */}
      </Suspense>
    </>
  );
}

async function Revenue() {
  const data = await getRevenue(); // async Server Component
  return <Chart data={data} />;
}

Dikkat edilecekler

• Waterfall'dan kaçının: Aynı bileşende sırayla await a; await b; yapmak yerine bağımsız istekleri Promise.all ile paralel başlatın veya ayrı Suspense sınırlarına bölün.
• Suspense sınırlarının yerini UX belirler: çok fazla küçük spinner "patlamış mısır" etkisi yaratır.
• Skeleton'lar gerçek içerikle aynı boyutta olmalı (CLS).
• Streaming başladıktan sonra HTTP status kodu ve header değiştirilemez; notFound()/redirect() gibi kararları stream başlamadan, ilk await'lerde verin.
• Selective hydration sayesinde React, kullanıcı etkileşime geçtiği bölümü önce hydrate eder.