docs(guide): add .client and .server components (#7084)

docs/content/2.guide/3.directory-structure/4.components.md

@@ -182,6 +182,47 @@ Use a slot as fallback until `<ClientOnly>` is mounted on client side.
 Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case.
 :: -->
 
+## .client Components
+
+If a component is meant to be rendered only client-side, you can add the `.client` suffix to your component.
+
+```bash
+| components/ 
+--| Comments.client.vue
+```
+
+```html{}[pages/example.vue]
+<template>
+  <div>
+    <!-- this component will only be rendered on client side -->
+    <Comments />
+  </div>
+</template>
+```
+
+::alert{type=warning}
+This feature only works with Nuxt auto-imports. Explicitly importing these components does not convert them into client-only components.
+::
+
+## .server Components
+
+`.server` components are fallback components of `.client` components.
+
+```bash
+| components/ 
+--| Comments.client.vue
+--| Comments.server.vue
+```
+
+```html{}[pages/example.vue]
+<template>
+  <div> 
+    <!-- this component will render Comments.server server-side then Comments.client once mounted in client-side -->
+    <Comments />
+  </div>
+</template>
+```
+
 ## Library Authors
 
 Making Vue component libraries with automatic tree-shaking and component registration is super easy ✨