docs: add docs for delayed hydration

docs/2.guide/2.directory-structure/1.components.md

@@ -119,6 +119,37 @@ const show = ref(false)
 </template>
 ```
 
+## Delayed Hydration 
+
+In real world applications, some pages may include a lot of content and a lot of components, and most of the time not all of them need to be interactive right off the bat. Having them all load eagerly can negatively impact performance and bundle size. 
+
+In order to optimize the page, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks for example. Nuxt has first class support for delayed hydration components and can help you reduce your boilerplate along the way.
+
+Nuxt has reserved component prefixes that will handle this delayed hydration for you, that extend dynamic Imports. By prefixing your component with `LazyVisible`, Nuxt will automatically handle your component and delay its hydration until it will be on screen.
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <LazyVisibleMyComponent />
+  </div>
+</template>
+```
+
+If you need the component to load as soon as possible, but not block the critical rendering path, you can use the `LazyIdle` prefix, which would handle your component's hydration whenever the browser goes idle.
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <LazyIdleMyComponent />
+  </div>
+</template>
+```
+
+::important
+Since Nuxt uses `LazyIdle` and `LazyVisible` to handle delayed hydration, you should avoid naming your components that, as dynamic imports will break for you. Delayed Hydration would still be possible by adding the prefix, for example to a component named `IdleBar`:
+`<LazyIdleIdleBar />`
+::
+
 ## Direct Imports
 
 You can also explicitly import components from `#components` if you want or need to bypass Nuxt's auto-importing functionality.