Nuxt 组件本质上与 Vue 组件非常相似，因为 Nuxt 框架是基于 Vue 构建的。不过，Nuxt 框架自带了一些额外的组件，为 Nuxt 项目提供额外的优化功能。

Vue 组件是 Vue.js 应用中的可复用构建块，封装了特定的功能和用户界面元素。每个组件都可以拥有自己的属性、方法和事件，使得代码可以在应用的不同部分轻松复用。

如需复习 Vue 组件的相关知识，请参阅 Vue 官方文档中的组件章节。

环境特定组件

Nuxt 提供的一项优化功能是能够指定某个组件是在服务器端还是客户端渲染。

仅服务器端组件

如前几节课所述，服务端渲染的页面通过向爬虫提供内容来提升 SEO 效果。将一个组件标记为仅在服务器端渲染，意味着每当有请求访问包含该组件的页面时，该组件都会被预渲染。

默认情况下，Nuxt 组件是服务器端组件，除非特别指定。

定义仅服务器端组件

可以在 components 目录下使用 .server.vue 扩展名定义仅服务器端组件。这样，该组件只会被服务器端渲染，客户端不会有任何输出。

在此示例中，原本预渲染页面中显示的是“Hello World”文本，现在变为“Server's Hello World”文本，当客户端完成渲染后，会切换为“Client's Hello World”文本。

另一种观察方式是通过命令行界面（CLI）或其他非浏览器客户端进行测试。

这是因为 HelloWorld.server.vue 组件在服务器预渲染阶段被展示，而不是 HelloWorld.vue 组件。

仅客户端组件

相比之下，仅客户端组件适用于需要客户端独有资源或依赖用户交互的场景。

以下是一些最适合在客户端定义的组件示例：

• 需要浏览器 window 对象的组件
• 弹窗（Modals）
• 图表（Charts）

定义仅客户端组件

一种实现方式是在 components 目录下使用 .client.vue 扩展名定义组件。这样，该组件仅在客户端渲染，服务器端不会渲染此组件。

在下面的 SPA 示例中，创建了一个带有 .client.vue 扩展名的 HelloWorld 组件副本。当页面在客户端渲染时，将显示 HelloWorld.client.vue 组件的内容。

注意，初始时先显示“Hello World”文本，随后才渲染出“Client's Hello World”文本。

这是因为页面在服务器端使用 HelloWorld.vue 组件进行预渲染，而 HelloWorld.client.vue 组件是在客户端（浏览器）中渲染的。

将页面的一部分仅在客户端渲染

当使用第三方模块的组件，或某些页面区域更适合在客户端渲染时，这种做法非常有用。此时，可以将这些组件嵌套在 <ClientOnly> 组件中。

例如，如果只需要在调查应用的“首页”上仅在客户端渲染按钮，可以这样实现：

1<template>
2  <ClientOnly fallback-tag="p" fallback="Loading Buttons">
3    <HelloWorld />
4  </ClientOnly>
5</template>
6<script setup></script>

fallback-tag 和 fallback 属性用于定义在客户端组件尚未加载完成之前，服务器端和客户端将显示的备用元素。在此例中，备用元素为 <p>Loading Buttons</p>。

总结

Nuxt 组件本质上与 Vue 组件一致，但 Nuxt 进一步支持在特定环境中定义组件。例如，服务器端组件在服务器上渲染并以 HTML 形式发送给客户端，这有助于减少客户端需要下载的 JavaScript 量，从而提升网站性能。客户端组件则在浏览器中渲染，可用于为网站添加交互性。