vue-lazy-hydration | Lazy Hydration of Server-Side Rendered Vuejs Components | Frontend Framework library

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)

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.