4

First question

When I'm using Lazy load with nuxt and components: true
For example

<div v-if="condition"> <!-- 1 -->
  <LazyComponent v-if="condition"/>
</div>
<div v-if="condition"> <!-- 2 -->
  <LazyComponent/>
</div>
<div v-if="condition"> <!-- 3 -->
  <Component/>
</div>

The v-if should be on the component in order to lazy load or it will work when parent has the condition, if it will work with the parent the component must start with Lazy?

Second question

I am using vue-lazy-hydration package in order to decrease my Time to Interactive and Total Blocking Time. When (LazyHydrate when-idle) take action I don't understand when the browser is idle.

kissu
  • 40,416
  • 14
  • 65
  • 133
mr_robot
  • 415
  • 1
  • 5
  • 16

1 Answers1

5

First part of your question

Here a tweet about the subject, recommending a v-if on the component itself.

To make a recap on all of the 3 cases that you do have here:

  1. this one is by far the most optimal (v-if on component + Lazy)
  2. this one is not the one recommended, meanwhile it works aswell (the component is loaded only the condition is met, you can inspect the network tab to be sure)
  3. here, the component will be loaded directly on the page (JS asked + parsed), just not mounted (worst possible case)

So, pretty much:

  • you can lazy pretty much every component that you want to import, it's rarely a bad idea
  • prefer to apply v-if directly on the component
  • if you apply the v-if on the parent tag, Nuxt can somehow still achieve to make it work (double-check your network tab to be sure: build your app and inspect the JS loaded when the v-if condition is met)

Second part of your question

A browser is idle when there is nothing happening on the website (CPU-wise) as explained by this answer. This answer may also be useful IMO.

Also, I think that this idle is something totally different and unrelated.

PS: last time I checked Markus' project (vue-lazy-hydration), it wasn't compatible with Nuxt2.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • why lazy pretty much every component that you want to import is a bad idea? – mr_robot Dec 07 '21 at 16:35
  • and if vue-lazy-hydration not compatible with nuxt you have and suggestion how i can decrease my Time to interactive and total blocking time, ty for your help – mr_robot Dec 07 '21 at 16:36
  • @nadav I actually said the opposite here, `lazy` as much as you can. Only some things cannot be lazy-loaded. Mostly the ones that you need straight away. Also, if you ever have a bug related to this, you could test by eagerly loading it (with no `lazy` prefix). As of what to do to decrease some metrics, it's a broad question and it may come from a lot of things. Maybe give a look to my [previous answer](https://stackoverflow.com/a/67319935/8816585). Not directly an answer but still valid opinion. Otherwise, you could also try Nuxt3, but beware because it's still in beta. – kissu Dec 07 '21 at 16:53
  • @kissu Can you please clear one thing for me that is if we add the `v-if` condition inside lazy component like `` then what is the difference between `` and ``.. ? – Kishan Bhensadadiya Jul 20 '23 at 07:34
  • 1
    @KishanBhensadadiya nowadays Nuxt does have [server components](https://nuxt.com/docs/guide/directory-structure/components#server-components) so that would be a better solution overall (official and supported). As for the initial question, I'd say it depends what is the start of the condition but probably a huge mess in terms of hydration and not a lot of benefits (or some visual glitches until the UI is hydrated). – kissu Jul 20 '23 at 13:10
  • @kissu Thanks for clearing up. So the `` is also fine without Lazy keyword as this will not give more benefit as you said right? Apology but I need to clear the lazy load features and what the actual benefits of it – Kishan Bhensadadiya Jul 21 '23 at 05:37
  • @KishanBhensadadiya I'm just saying that hydration by itself is complex, Nuxt is a meta-framework helping in that regard. Meanwhile, it's not trivial to explain such principles in a few lines of a StackOverflow comment haha. Give a read to Nuxt server components and do your own testing regarding the hydration. It may take some time but you'll probably understand how it works + how to handle the whole thing with time. – kissu Jul 21 '23 at 07:00
  • 1
    @kissu Yes, I'll surely do this. By the way thanks for the time to give me the answer! – Kishan Bhensadadiya Jul 25 '23 at 09:50