Lazy Loading

## 1. Learning Objectives By the end of this lesson, you will be able to lazy-load Client Components, split heavy libraries, use loading fallbacks, and decide what should not be lazy-loaded. Difficulty: Intermediate. ## 2. Prerequisites - Client Components. - Suspense. - Bundle basics. ## 3. Overview Lazy loading delays loading code until it is needed. In Next.js, route-level code splitting happens automatically, while `next/dynamic` and dynamic `import()` help defer expensive components or browser-only libraries. ## 4. Why This Topic Matters Large initial JavaScript bundles slow startup. Lazy loading keeps first render focused on what users need immediately and defers secondary interactions. ## 5. Real-World Analogy Lazy loading is like bringing tools to the table only when the task starts. You do not cover the workspace with every possible tool before the user asks for one. ## 6. Core Concepts | Concept | Meaning | |---|---| | Code splitting | Breaking JavaScript into smaller chunks. | | `next/dynamic` | Next.js helper for dynamic component loading. | | Dynamic import | JavaScript `import()` that loads code on demand. | | Fallback | UI shown while lazy code loads. | | Critical path | Work needed for first useful render. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The chart code is loaded only after the user asks for analytics. ## 10. Interactive Playground Try this: - Lazy-load a chart component. - Add a loading fallback. - Compare initial bundle size before and after. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Lazy-loading critical hero UI | Lazy loading sounds universally good. | Keep above-the-fold essential UI immediate. | | No fallback | The chunk loads silently. | Show meaningful loading UI. | | Lazy-loading tiny components | Over-optimization. | Reserve lazy loading for meaningful code savings. | ## 12. Best Practices - Lazy-load heavy client-only widgets. - Keep critical content in the initial render. - Use clear fallbacks. - Measure bundle impact. - Prefer Server Components for static heavy work when possible. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Dynamic import | Modern JavaScript | Bundler handles chunks. | | Suspense fallback | React behavior | Useful for pending UI. | | Route splitting | Framework feature | Automatic in Next.js routes. | ## 14. Interview Questions **Easy:** What does lazy loading defer? Answer: Loading code or resources until they are needed. **Medium:** When is lazy loading useful? Answer: For heavy, non-critical, client-side components such as charts, editors, maps, or modals. **Hard:** Why not lazy-load the main page heading? Answer: Critical content should render immediately for UX, SEO, and perceived performance. ## 15. Debugging Exercise Bug report: "Clicking open modal shows nothing for two seconds." Solution The modal may be lazy-loaded without a fallback. Add loading UI or preload the modal when intent is likely. ## 16. Practice Exercises - Easy: Lazy-load a modal. - Medium: Lazy-load a chart behind a button. - Hard: Move static markdown rendering to the server and lazy-load only the interactive editor. ## 17. Scenario-Based Challenge A dashboard imports a large charting library on first load, even when charts are hidden. What should change? Walkthrough Move charts into a lazily loaded Client Component, show a skeleton fallback, and load only when the chart tab becomes visible. ## 18. Quick Quiz 1. Next.js helper for lazy components? Answer: `next/dynamic`. 2. Should critical UI be lazy-loaded? Answer: Usually no. 3. What should users see while a chunk loads? Answer: A fallback. 4. What kind of component benefits most? Answer: Heavy non-critical Client Component. 5. Does Next.js route split automatically? Answer: Yes. ## 19. Summary & Key Takeaways - Lazy loading defers non-critical code. - Use it for heavy client widgets. - Keep critical content immediate. - Always provide useful fallback UI. - Measure before and after. ## 20. Cheat Sheet | Need | Tool | |---|---| | Lazy component | `next/dynamic` | | Lazy library | `import()` | | Pending UI | `loading` fallback | | Critical content | Do not defer | | Hidden chart | Lazy-load | ## 21. Further Reading - Next.js Docs: Lazy Loading. - React Docs: Suspense. - web.dev: Reduce JavaScript payloads. ## 22. Next Lesson Preview Next, you will learn bundle optimization and how to find what makes JavaScript heavy.