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.
Couldn't you technically have improved it even further by dynamically importing 'next/dynamic' only in one of the button click events?From my understanding, you would get back to your initial 4kb on initial load since even 'next/dynamic' is not included, then the button click would pull the 15kb from 'next/dynamic' to perform the dynamic import which would immediately be followed up by the 25kb of the heavy component.
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.
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.
Been procrastinating dynamic imports for a while, thanks for the explainer ^^ Keep up the good work, looking forward to your channel growing
Thank you! It means a lot!
That was an clear explanation.. haven't heard this kind of explantion from the other videos. Thanks man
This was a really good explanation. Thanks!
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.
Well explained. Keep doing the great work ❤
Well explained, thank you so much !
Couldn't you technically have improved it even further by dynamically importing 'next/dynamic' only in one of the button click events?From my understanding, you would get back to your initial 4kb on initial load since even 'next/dynamic' is not included, then the button click would pull the 15kb from 'next/dynamic' to perform the dynamic import which would immediately be followed up by the 25kb of the heavy component.
Good explanation
thanks,it's really good explanation.
How to use next/dynamic without this button, for example do delay load of certain component on first page load?
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.
@@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?
How on earth are you using useState in the server component?
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.
This may help, thank you.
Can you make a video on how to find out what is causing your FCP to be slow?
I hope you find it useful!
I'll keep that in mind for future videos.
Your async await calls move to server components and start using suspense your FCP will be improved drastically
Great job!
Thank you! Cheers!
Thanks, man! This saved my ass :)
you rock dude
Thanks! But why is it 19kb and not 4.6kb ? :p
Because the `import dynamic from 'next/dynamic'` has it's own JS size.
Trade off is extra network call
thank you!
No problem, glad you found it useful!
*Promo SM* ✅
Get to the point, you repeat one thing 50 times...
It makes sense to repeat important things so they stick with you, I'll keep this in mind for future videos!