Understanding lazy load and hydration in nuxt

user_14202481 0
Viewed 3688

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.

nuxt.js
1 Answers

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.

user_88165850
Related