The Lazy component prefix and when to use it - Nuxt Performance in Depth
Вставка
- Опубліковано 25 лип 2024
- 🤯 Nuxt provides amazing auto-import capabilities for composables, utils and also components out of the box. But besides auto-importing them, it also provides a "Lazy" version of it. In the second video of the Nuxt Performance in Depth series, we have a look at the lazy prefix, what it does and when to use it to achieve sweet performance gains!
Key points:
🧠 What is the `Lazy` prefix and how is it implemented
✅ What does it do and when to use it
🔍 Examples for usage and overusage
Links:
🔗 Nuxt Lazy Transform Plugin: github.com/nuxt/nuxt/blob/mai...
🔗 Demo application: github.com/manniL/alexander-l...
🔗 Async components: vuejs.org/guide/components/as...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:50 Demo app overview
01:15 What is the lazy prefix
03:24 Which problem lazy solves
04:58 Using the lazy component prefix
06:16 Overusing it and why you shouldn't
07:42 TL;DR and Summary
#NuxtPerformanceInDepth #Performance #nuxt3 #lazy #async #nuxtjs #webdevelopment #frontend #frontenddeveloper - Наука та технологія
Did you use the `Lazy` prefix so far?
Yes
yeah and only on my Footer and since then i sometimes get a strange error telling me failed to load module. But only if you hard reload the page several times. It gets displayed and is hydrated properly tho
@@moe8055 Weird. That should work always. Maybe because of redeploys?
@@moe8055 did you try to encapsulate your component with ?
Fantastic. I haven't looked into performance enhancements yet but I'll start using Lazy Loading for some tabbed components and my modals. This is great!
That's a good start 🙌
It would be so cool if you would make a collab course on Nuxt 3 with Maximilian Schwarzmüller from Academind, it would be like the best course in the world on Nuxt! You both share so practical and easy way of telling about all of those concepts which is so rare these days 👍
Interesting idea! Nothing is impossible 👀
But being mentioned in a row with Max is already on honor 🙏
Awesome video. Thanks a lot 👍
My pleasure!
Another great video. 👍
Thanks again Jure!
anxiously waiting
Haha why?
There it is now 🙏
love the video, thankyouu!!
You are welcome! 🙏
Nice video. Subscribed ❤
Thanks for the sub! ✨
very useful informations
Glad you think that! 🙏
🙌
Лучший 👍
Большое спасибо ✨
Thanks for showing the source code! We're lazy loading some below the fold content, but it's different for mobile and desktop.
Yeah, that's the tricky part. If in doubt, rather lazy-load less than penalizing a larger percentage of users.
Thank you for covering features which are perhaps a bit more obscure or not well documented
You are welcome 🙏😊
Thank you, man! That`s very helpfull. Can you please tell about chunk splitting with modern nuxt in future videos?
You are welcome!
What exactly you'd want to know about chunk splitting? How they are split by default and how to customize?
Terimakasih sharingnya kak salam sukses
Sama-sama!
🙏
Thanks for the explanation. Is there room in the series for a deep dive into a combination of cached server routes, local caching (useFetch keys like in your other video) and optimistic UI changes that update the local state and local cache accordingly while invalidating the server's cache after a change is made? I've been hitting this issue in my project where a large list is loaded and small changes can be made to it with post requests, but refreshing all the data just for this small change to be reflected in the UI seems like overkill.
Optimistic UI is quite nice (discovered it with Apollo) but it can also be quite tricky for a small amount of benefits. 😅
I agree, but it's an important UX factor when the refresh load is high. Back in the Vue 2 days I used to handle this with Vuex, which wasn't fun to work with but it got the job done. I think mutations through 'useNuxtData' is what can be used to streamline this.@@kissu_io
Great idea. I might cover that in a stream in a future because it might be a bit long for a single video. But let's see, maybe I can shrink it down 😊
In the meantime, you might want to check nuxt.com/docs/api/composables/use-nuxt-data#optimistic-updates
Interesting! It would be much more useful with directives for placeholder (and loading and error states) as Angular introduced in the latest version.
Vue lets you define AsyncComponent with loading state at its core but Angular defered views are really powerfull I think. No extra step with lazy declarations.
Technically this is possible in Vue too via defineAsyncComponent as you said (loading/error state), but I agree, a more declarative way would be interesting to see.
With regards to hydration though, that is also something coming - See github.com/nuxt/nuxt/issues/24242
@@TheAlexLichter Oh interesting! Thanks.
Is there a fallback while the js for the Lazy component is being downloaded? What happens if the chunk load results in error?
You can define a fallback via a named fallback slot, yes 👌
If any chunk load fails, nuxt will usually reload
I use Lazy almost by default for any Dialog/modal elements as they are not sure to be used in the app, therefore not needed to be loaded... There are other use-cases of course, but this would be the default
Yes, that's almost a no-brainer (as long as a possible delay is justifiable when the user clicks on the modal/dialog)
I have a question: Do Lazy components automatically effect their child components?
For example, is this the correct way to do it: or like this:
It depends. If the component is passed as slot, then you'd need the prefix. If it is already part of the parent, you can omit it.
Thank you! I appreciate it :)@@TheAlexLichter
My understanding is that too much lazy loading is harmful and we should not lazy load components like the navbar footer.
Yes and no.
✔ Correct is: Too much lazy-loading is harmful. Also lazy-loading content *above the fold* is not good.
When it comes to the Footer, I'd say you *can* lazy-load it if it is below the fold, so the user won't see or need it straight away. That's most common for most pages (without a sticky footer).
thank you for the answer@@TheAlexLichter
Still don't know where to use in real life application, it would be better if you show some websites that has it, for better visual understanding
I might do that, thank you for the suggestion 🙏🏻
@@TheAlexLichter Thank you :)