When to use loadable-components in NextJS app?

Question

I'm trying to improve my site performance and the Google Chrome Lighthouse tells me to use loadable-components for ssr in order to "remove unused javascript".

What I found in the doc is it seems to be a library with useful functions for my case, eg: component splitting/ loading library.

My question is:

1. Does @loadable/component is really that good?
2. If it is good, should I use it for any component/library import?

Thank you!

Answer 1

By default, Next.js splits your JavaScript into separate chunks for each route. So when users load your application, Next.js only sends the code needed for the initial route.

You can further optimize the loading process with code splitting on the component level using inbuilt next/dynamic

Refer code splitting with dynamic imports for more details.