Using Dynamic Imports
Next.js offers out of the box code splitting support due to its page-based architecture. So, your pages loads & render faster in the client-side.
That's where Next.js dynamic imports comes handy. With that, you can conditionally load modules as needed. This will open us a lot of capabilities, including:
- Only load modules as needed for dynamic content (eg:- Blog posts embeds)
- Lazy load heavy modules (For animations in the home page)
- Disable running some specific component inside the server
- Disable loading specific module inside the server