Back to Glossary

Lazy Loading

التحميل الكسول

GLS-000089

Intermediatereact-nextjs1 min read
code splittingdynamic importnext dynamiclazydeferred loading
Official DocsSign in to save & take notes

Definition

Loading a component or resource only when it's actually needed, not on initial page load.

تحميل مكوّن أو مورد فقط عند الحاجة الفعلية إليه، وليس عند التحميل الأولي للصفحة.

Why It Matters

Smaller initial bundles mean faster page loads. On 404Fault, heavy components like the Knowledge Graph visualization are lazy-loaded.

الحزم الأولية الأصغر تعني تحميل أسرع للصفحة. في 404Fault، المكونات الثقيلة مثل مرئي الرسم البياني للمعرفة تُحمَّل بشكل كسول.

Full Definition

Lazy loading delays the loading of components or resources until they're needed. In Next.js, use dynamic() from next/dynamic to lazily import components. This reduces the initial JavaScript bundle size and speeds up first load. Common use cases: loading a heavy chart library only when the chart is visible, or deferring a modal's JavaScript until the modal opens.
التحميل الكسول يُؤخِّر تحميل المكونات أو الموارد حتى تكون مطلوبة. في Next.js، استخدم dynamic() من next/dynamic لاستيراد المكونات بشكل كسول. هذا يُقلِّل حجم حزمة JavaScript الأولية ويُسرِّع التحميل الأول. حالات الاستخدام الشائعة: تحميل مكتبة مخططات ثقيلة فقط عندما يكون المخطط مرئيًا، أو تأجيل JavaScript للنافذة المنبثقة حتى تفتح.

Example Usage

“const KnowledgeGraph = dynamic(() => import('@/components/glossary/KnowledgeGraph'), { ssr: false }) defers loading the graph component.”

“const KnowledgeGraph = dynamic(() => import('@/components/glossary/KnowledgeGraph'), { ssr: false }) يُؤجِّل تحميل مكوّن الرسم البياني.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Lazy Loading:

1

Lazy loading tiny components (overhead not worth it)

2

Forgetting ssr: false for components that use browser APIs

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 Lazy Loading.

Explain:
1. What is Lazy Loading and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Lazy loading tiny components (overhead not worth it), Forgetting ssr: false for components that use browser APIs
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account