ssr,nuxtjs,vuejs··约 2 分钟读完
控制 Nuxt 页面的渲染模式：客户端 vs 服务端渲染
Nuxt页面渲染模式可通过文件命名控制：默认.vue为客户端渲染，改为.server.vue则启用服务端渲染。两种模式切换仅需修改文件后缀，无需改动组件代码。服务端渲染可提升首屏性能与SEO效果，而客户端渲染适合交互较多的场景。这种灵活的命名约定让开发者能轻松优化不同页面的渲染策略。
前端javascript
控制 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文件则启用服务端渲染。 - 仅需修改文件后缀即可切换渲染模式，无需改动组件内部代码。