Back to Glossary

Suspense

Suspense (التعليق)

GLS-000088

Intermediatereact-nextjs1 min read
react suspensesuspense boundaryloading boundarystreaming
Official DocsSign in to save & take notes

Definition

A React feature that shows a loading fallback while waiting for async data or lazy-loaded components.

ميزة React تعرض بديلًا للتحميل أثناء الانتظار على بيانات غير متزامنة أو مكونات تُحمَّل كسولًا.

Why It Matters

Suspense prevents blank screens while data loads. The loading.tsx files in 404Fault use Suspense to show skeletons during page transitions.

Suspense يمنع الشاشات الفارغة أثناء تحميل البيانات. ملفات loading.tsx في 404Fault تستخدم Suspense لإظهار هياكل أثناء انتقالات الصفحة.

Full Definition

Suspense lets you define a fallback UI (like a spinner or skeleton) that shows while a child component is loading data or being lazily imported. In Next.js App Router, you create loading.tsx files which automatically wrap pages in a Suspense boundary. Suspense also enables streaming — sending partial HTML to the browser before all data is ready.
Suspense يتيح لك تعريف واجهة بديلة (مثل محوّل أو هيكل) تظهر أثناء تحميل مكوّن ابن للبيانات أو استيراده بشكل كسول. في Next.js App Router، تُنشئ ملفات loading.tsx التي تلفّ الصفحات تلقائيًا في حد Suspense. يتيح Suspense أيضًا البث — إرسال HTML جزئي إلى المتصفح قبل اكتمال جميع البيانات.

Example Usage

“<Suspense fallback={<GlossaryTermSkeleton />}><GlossaryTermPage slug={slug} /></Suspense> shows a skeleton while the term data fetches.”

“<Suspense fallback={<GlossaryTermSkeleton />}><GlossaryTermPage slug={slug} /></Suspense> يُظهر هيكلًا أثناء جلب بيانات المصطلح.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Suspense:

1

Wrapping the wrong component in Suspense

2

Not providing a meaningful fallback — a blank div is not helpful to users

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Suspense.

Explain:
1. What is Suspense and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Wrapping the wrong component in Suspense, Not providing a meaningful fallback — a blank div is not helpful to users
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account