SSR 如何区分 服务端 和 客户端
二、构建时环境变量注入法 利用构建工具（如 Webpack、Vite）在编译阶段注入环境变量： Webpack 的 DefinePlugin 在 Webpack 配置中定义全局常量： javascript// webpack.config.jsplugins: [ new webpack.DefinePlugin({ IS_SERVER: JSON.stringify(process.env.SSR === 'true') })] 代码中直接使用： javascriptif (IS_SERVER) { // 服务端逻辑} else { // 客户端逻辑} Next.js 的自动注入 Next.js 默认提供 process.browser 作为环境标识： javascriptif (process.browser) { // 客户端逻辑（如访问 localStorage）} 三、框架特性法 通过 SSR 框架提供的原生 API 或钩子判断环境： Next.js 的 useRouter 与 getServerSideProps getServerSideProps 仅在服务端执行 客户端通过 useRouter 获取路由信息： javascriptimport { useRouter } from 'next/router';const router = useRouter(); React 的 componentDidMount 生命周期 服务端渲染时，componentDidMount 等客户端生命周期钩子不会执行 四、同构代码隔离法 通过动态导入（Dynamic Import）或条件编译隔离环境相关代码： 动态加载客户端专用模块 javascriptif (typeof window !== 'undefined') { const clientModule = await import('client-only-module');} 服务端专用文件后缀 Next.js 支持 .server.js 和 .client.js 后缀，构建时自动分离代码 五、Hydration 标记法 利用服务端渲染生成的标记（如 data-hydrate）协调双端： // 服务端渲染时添加标记
来源整理自：vue3js.cn 面试官系列
