Why your app may need lazy loading

Great stuff. It’s funny, I was just thinking about this the other day. All I have to do is type “nba” or “nfl”, and it populates all of the scores for the recent games.

Why is the widget component a client component?

Amazing content as always, and thanks for sharing everything.

I am also wondering if there's any chance to have some content about 'Front-End' testing?...

Thanks for you great effort for teaching us new things  sir

Oh cool! I was using the dynamic import with the {SSR: false} option, I didn't think about this use case!
But what if the dynamic condition is always true, does it hurt performance to have it dynamic even if it's server-side rendered ?

but can you have a still have a fallback with the nextjs dynamic?

What colorscheme is that on vscode? looks great

Quick and helpful, Thanks

You’re amazing ❤

amazing content

If anyone wonders how to do this in angular, the new angular version 17 has @defer block which does the lazy loading for you, it's super easy

I thought Next lazy loads the entire SPA automatically for different routes. I didnt even know this component lazy loading also existed. Thanks!

Lazy loading really powerful to improve the initial loading performance! Thanks for this one Cody!

Good ol' 3Mb calculator
There is actually a ton of things you can use lazy loading for. Basically anything that doesnt appear immediately on the page is a good candidate for lazy loading, wether it is modals, tabs content, etc. You can even setup to lazy import content that is below the fold when they're about to come into the viewport.

Be aware though that overdoing it can do more harm than good. I once worked on an app where EVERY component was lazy loaded, and it created these horrid waterfall effects of js imports and the UI being built in awkward chunks.