Next.jsIntermediate

Loading UI ও Streaming

loading.tsx ও Suspense দিয়ে progressive rendering — streaming বাংলায়।

11টি অংশবাংলা ভাষায়

Slow data fetch-এর কারণে পুরো page block হয়ে থাকা ঠিক নয়। Streaming দিয়ে page-এর কিছু অংশ আগে, কিছু অংশ পরে পাঠানো যায় (progressive rendering)।

loading.tsx

route segment-এ loading.tsx ফাইল যোগ করলে Next.js স্বয়ংক্রিয়ভাবে page-কে <Suspense>-এ মোড়ায় — fetch চলাকালীন loading UI দেখায়।

app/blog/loading.tsxtsx

tsx

export default function Loading() {
  return (
    <div className="animate-pulse space-y-4 p-4">
      <div className="h-8 rounded bg-gray-200" />
      <div className="h-8 rounded bg-gray-200" />
      <div className="h-8 rounded bg-gray-200" />
    </div>
  );
}

Suspense

<Suspense> দিয়ে page-এর নির্দিষ্ট অংশ আলাদা ভাবে stream করা যায় — বাকিটা সাথে সাথে show হয়।

app/blog/page.tsxtsx

tsx

import { Suspense } from "react";
import BlogList from "../components/blog-list";
import BlogListSkeleton from "../components/blog-list-skeleton";

export default function BlogPage() {
  return (
    <div>
      <header>
        <h1>Welcome to the Blog</h1>
      </header>
      <main>
        <Suspense fallback={<BlogListSkeleton />}>
          <BlogList />
        </Suspense>
      </main>
    </div>
  );
}

এখানে header সাথে সাথে আসে, আর BlogList-এর data ready হলে stream হয়।

Meaningful Loading States

Skeleton — ভবিষ্যৎ UI-এর আভাস, best practice
Spinner — কিছু process চলছে বোঝায়
Priority Content — cover photo, title ইত্যাদি আগে

Loading-এ কী করবেন না

Text-only “Loading...” ফাঁকা-ফোঁকা মনে হয়। Skeleton বা page-এর গুরুত্বপূর্ণ অংশ আগে দেখান।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।