控制 Nuxt 页面的渲染模式：客户端 vs 服务端渲染

控制 Nuxt 页面的渲染模式：客户端 vs 服务端渲染

在 Nuxt 项目中，默认情况下页面是在客户端渲染的。例如，以下是一个普通的页面组件 index.vue：

<template>
  <NuxtLink href="/" class="flex items-center gap-2">
    <span class="text-lg font-bold">xxxx</span>
  </NuxtLink>
</template>

此时，页面渲染发生在浏览器端（客户端渲染）。

如果希望该页面在服务端进行渲染，只需将文件名改为 index.server.vue：

<template>
  <NuxtLink href="/" class="flex items-center gap-2">
    <span class="text-lg font-bold">xxxx</span>
  </NuxtLink>
</template>

这样，该页面会在服务端生成完整的 HTML 再发送给客户端，提升首屏加载性能与 SEO 效果。

---

总结：

• 使用 .vue 文件默认走客户端渲染。
• 使用 .server.vue 文件则启用服务端渲染。
• 仅需修改文件后缀即可切换渲染模式，无需改动组件内部代码。