Bootspring
HomeGet Started

Lazy Loading Pattern

Improve initial page load by deferring non-critical components, data, and assets using dynamic imports, Suspense, and Intersection Observer.

What's Included#

  • Dynamic imports with next/dynamic including SSR-disabled and named export variants
  • React.lazy with Suspense for tab-based and conditional component loading
  • Intersection Observer hook for loading content when it scrolls into view
  • Lazy image loading with blur placeholders and fade-in transitions
  • Virtual list rendering with TanStack Virtual for large datasets
  • Preloading on user intent (hover, focus) for better perceived performance

Usage#

Via CLI#

Loading code block...

Via AI Assistant#

Ask your AI assistant:

  • "Use the lazy loading pattern from Bootspring"
  • "Apply the Bootspring lazy loading pattern to my project"

Key Considerations#

  • Never lazy load above-the-fold content; use priority loading for hero images and critical UI
  • Always provide meaningful skeleton fallbacks so users see structure while content loads
  • Use bundle analyzer to identify which heavy components benefit most from lazy loading
  • Use virtual lists for any list with more than 100 items to avoid DOM bloat
  • Prefetch routes and components on hover to make navigation feel instant

Related Patterns#