Speed up your Website with Next.js Dynamic Import Lazy Loading

[@Pk_0807]

That was an clear explanation.. haven't heard this kind of explantion from the other videos. Thanks man

[@eminvesting]

Been procrastinating dynamic imports for a while, thanks for the explainer ^^ Keep up the good work, looking forward to your channel growing

[@tenacity_dev]

Thank you! It means a lot!

[@danser_theplayer01]

I understand that the video is about next.js but literally the import() function is representing the whole concept of a dynamic import, and it works with any javascript. Just want people to know that they can do it in vanilla with basically no hand rolling required, you simply make a short function just like making a component. Put up a lodaing screen, await loading, done. In one of my projects I'm funneling a lot of modules through a file and importing them as one mean variable. I have 2 folders with similar code and I want only one depending on the environment. So I have an IFEE to load one folder or the other. It's a use case not for fast upfront loading but for conditional loading to remove redundancy.

[@Ziggy0120]

This was a really good explanation. Thanks!

[@Furki4_4]

Well explained, thank you so much !

[@ОлегБаранчиков-ф5у]

Good explanation

[@JeromeChung]

thanks,it's really good explanation.

[@Its-InderjeetSinghGill]

Well explained. Keep doing the great work ❤

[@mr.random8447]

Trade off is extra network call

[@klapaucius515]

This may help, thank you. Can you make a video on how to find out what is causing your FCP to be slow?

[@tenacity_dev]

I hope you find it useful! I'll keep that in mind for future videos.

[@prabhurao2773]

Your async await calls move to server components and start using suspense your FCP will be improved drastically

[@york2301]

How to use next/dynamic without this button, for example do delay load of certain component on first page load?

[@tenacity_dev]

You can add the component directly without any conditionals. If you want to load the component only when it's visible then you can Intersection Observer.

[@york2301]

@@tenacity_dev is this kinda same like frame-motion? I have opacity:0 when component is not in view, when it is opacity is set to 1?

[@york2301]

Great job!

[@tenacity_dev]

Thank you! Cheers!

[@masterv2.045]

you rock dude

[@techaddictdude]

How on earth are you using useState in the server component?

[@tenacity_dev]

Good question, this was before the new Next.js updates where if you want to use state or something similar you had to write "use client" at the top of the component.

[@code_zeal6278]

thank you!

[@tenacity_dev]

No problem, glad you found it useful!

[@TheWoselWosel]

Thanks, man! This saved my ass :)

[@z1982_]

Thanks! But why is it 19kb and not 4.6kb ? :p

[@tenacity_dev]

Because the `import dynamic from 'next/dynamic'` has it's own JS size.

[@kairo2891]

*Promo SM* ✅

[@janduna4100]

Get to the point, you repeat one thing 50 times...

[@tenacity_dev]

It makes sense to repeat important things so they stick with you, I'll keep this in mind for future videos!