Nuxt 3：如何验证组件是否在客户端渲染？

以下几种方法可以直接验证你的组件或内容是在服务端还是客户端渲染的：

方法1：用Nuxt内置的环境变量 #

Nuxt 3自动注入了process.server和process.client两个全局变量，直接判断即可：

• 模板中直接显示：

<template>
  <p>当前渲染环境：{{ process.server ? '服务端' : '客户端' }}</p>
</template>

• 脚本中做逻辑判断：

<script setup>
if (process.server) {
  console.log('这段代码在服务端执行')
}
if (process.client) {
  console.log('这段代码在客户端执行')
}
</script>

方法2：通过DOM环境判断 #

服务端没有浏览器的window对象，所以可以用这个特性区分：

<script setup>
if (typeof window !== 'undefined') {
  console.log('当前是客户端环境')
} else {
  console.log('当前是服务端环境')
}
</script>

额外解决你的Netlify表单问题建议 #

既然问题出在SSR环节，给你两个实用的调整方向：

• 确保表单的name属性和Netlify后台配置的表单名称完全一致，且不要在服务端动态修改这个属性
• 把表单的渲染或初始化逻辑放到onMounted钩子中，确保只在客户端执行：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 这里写表单的绑定或初始化代码，只会在客户端运行
})
</script>

内容的提问来源于stack exchange，提问作者Edito