📌 Next.js – React Suspense

React Suspense, asenkron işlemleri declarative şekilde yönetmek için kullanılan bir mekanizmadır. Next.js 13+ ile App Router ve Server Components ile uyumlu çalışır.

1️⃣ Suspense Nedir?

• Bir bileşen henüz render edilmeye hazır değilse, askıya almak (suspending) için kullanılır.
• Amaç: isLoading gibi state’lere ihtiyaç duymadan yükleme durumlarını yönetmek.
• Askıya alınan bileşenler fallback ile geçici içerik gösterebilir.

Askıya alınma sebepleri:

1. Veri çekme (fetch, React Query, SWR, veya Next.js async server component fetch)
2. Kod yükleme (React.lazy ile dinamik import)

2️⃣ Suspense Nasıl Çalışır?

• Render sırasında askıya alınan bir bileşen bulunursa, React en yakın Suspense boundary’ye gider.
• Askıya alma tamamlanana kadar fallback gösterilir.
• İşlem tamamlanınca gerçek bileşen render edilir.
• Children, parent’a haber vermek için promise döner.

Child Component (askıya alındı) → Suspense Boundary → fallback göster → promise çözülünce gerçek render

3️⃣ Suspense Kullanımı

import { Suspense } from "react";
import CabinList from "./CabinList";
import Spinner from "./Spinner";

export default function Page() {
  return (
    <div>
      <h1>Cabins</h1>
      <Suspense fallback={<Spinner />}>
        <CabinList />
      </Suspense>
    </div>
  );
}