Streaming နှင့် Suspense

Dashboard မှာ user profile ကမြန်ပေမယ့် analytics ကနှေးတယ်ဆိုပါစို့။ Analytics ပြီးမှ page တစ်ခုလုံးပြရင် user က အလွတ် screen ကိုစောင့်ရပါတယ်။ Streaming က အဆင်သင့်အပိုင်းကို အရင်ပို့ပြီး နှေးတဲ့အပိုင်းကို နောက်မှဖြည့်ပေးပါတယ်။

နားလည်ထားရမယ့် အချက်

Suspense boundary က async component ကို fallback နဲ့ wrap လုပ်ပါတယ်။ Server က page shell ကိုအရင်ပို့ပြီး component data ပြီးလာတဲ့အခါ stream နဲ့ update လုပ်ပါတယ်။ loading.tsx က route အပြည့်အတွက်ကောင်းပြီး Suspense က page အတွင်း အပိုင်းငယ်တစ်ခုအတွက် ပိုတိကျပါတယ်။ Fallback က loading ဆိုတဲ့စာတစ်ကြောင်းထက် နောက်ပေါ်မယ့် UI အရွယ်နဲ့တူတဲ့ skeleton ဖြစ်ရင် layout shift နည်းပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

import { Suspense } from "react";

async function SlowNotes() {
  const notes = await getSlowNotes();
  return notes.map((note) => <article key={note.id}>{note.title}</article>);
}

export default function NotesPage() {
  return (
    <main>
      <h1>မှတ်စုများ</h1>
      <Suspense fallback={<p>မှတ်စုစာရင်း ဖွင့်နေသည်…</p>}>
        <SlowNotes />
      </Suspense>
    </main>
  );
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

NotesPage heading ကချက်ချင်းပေါ်ပြီး SlowNotes သာ Suspense ထဲစောင့်ပါတယ်။ Promise ကို parent မှာမ await ထားတာကြောင့် streaming ဖြစ်နိုင်ပါတယ်။

Heading အရင်ပေါ်ပြီး loading fallback နောက်တွင် note list ဝင်လာမည်။

Next.js — Fetching Data — Next.js