Next.js 15 Fullstack (App Router + Server Actions) · درس

بث واجهة المستخدم باستخدام Suspense وحالات التحميل

حسّن الأداء المتصوَّر عبر بث واجهة مستخدم مُصيّرة على الخادم باستخدام React Suspense وملفات loading.tsx والعناصر الهيكلية، ليظهر المحتوى للمستخدمين بشكل أسرع.

بث واجهة المستخدم باستخدام Suspense وحالات التحميل درس مجاني في Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack (App Router + Server Actions)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The Waterfall Problem

If a page waits for every data fetch before rendering, users stare at a blank screen. Streaming lets the server send ready parts of the page immediately and fill in slow parts as they finish.

What is Streaming SSR?

Next.js with the App Router can stream HTML in chunks. The shell and fast components arrive first; slow data-dependent sections stream in when ready, improving Time to First Byte and perceived speed.

React Suspense Basics

Suspense wraps a component that may not be ready and shows a fallback until it is. The rest of the page renders without waiting.

import { Suspense } from 'react';
<Suspense fallback={<p>Loading...</p>}>
  <SlowComponent />
</Suspense>

Async Server Components

In the App Router, a Server Component can be async and await data. Wrapping it in Suspense lets the page stream while that fetch resolves.

async function Reviews() {
  const data = await getReviews();
  return <ReviewList items={data} />;
}

Streaming a Slow Section

Render the page shell instantly and stream the slow part. Users interact with the rest while reviews load.

export default function Page() {
  return (
    <main>
      <Header />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </main>
  );
}

The loading.tsx Convention

A loading.tsx file beside a route automatically wraps that route's page in Suspense. Its export is shown instantly while the page's data loads.

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

Building a Skeleton

A skeleton mimics the final layout with gray placeholders, reducing layout shift and signaling that content is coming.

function ReviewsSkeleton() {
  return (
    <div className="animate-pulse space-y-2">
      <div className="h-4 bg-gray-200 rounded" />
      <div className="h-4 bg-gray-200 rounded w-3/4" />
    </div>
  );
}

Parallel Data Fetching

Avoid sequential awaits that create waterfalls. Multiple Suspense boundaries let independent sections fetch in parallel and stream as each completes.

<Suspense fallback={<A />}><Sales /></Suspense>
<Suspense fallback={<B />}><Traffic /></Suspense>

Granular Boundaries

Place Suspense around the smallest slow unit, not the whole page. Finer boundaries mean more of the UI is interactive sooner.

Streaming vs Static

Streaming shines for personalized or slow data. For content that rarely changes, static generation or caching is still faster. Combine both: cache what you can, stream the rest.

Best Practices

Stream effectively:

Wrap slow async Server Components in Suspense
Use loading.tsx for route-level fallbacks
Show skeletons to cut layout shift
Use parallel boundaries to avoid waterfalls

Quick Check

Test your streaming knowledge.

Recap

You learned to stream UI:

Streaming SSR sends ready HTML first and fills slow parts later
Wrap async components in Suspense with a fallback
Use loading.tsx for automatic route fallbacks
Show skeletons and use parallel boundaries

Your pages now feel fast even with slow data.

الأسئلة الشائعة

هل درس «بث واجهة المستخدم باستخدام Suspense وحالات التحميل» مجاني؟

نعم — نص درس «بث واجهة المستخدم باستخدام Suspense وحالات التحميل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack (App Router + Server Actions)، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.

ماذا ستتعلم في «بث واجهة المستخدم باستخدام Suspense وحالات التحميل»؟

حسّن الأداء المتصوَّر عبر بث واجهة مستخدم مُصيّرة على الخادم باستخدام React Suspense وملفات loading.tsx والعناصر الهيكلية، ليظهر المحتوى للمستخدمين بشكل أسرع. تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «بث واجهة المستخدم باستخدام Suspense وحالات التحميل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟

نعم. كل درس في Next.js 15 Fullstack (App Router + Server Actions) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

تحسين الصور والخطوط
تحليل حجم الحزمة
استراتيجيات التخزين المؤقت المتقدمة
بث واجهة المستخدم باستخدام Suspense وحالات التحميل

← العودة إلى Next.js 15 Fullstack (App Router + Server Actions)