ssr 中全局执行上下文不可复用，须为每次请求创建新实例以防状态污染；node.js 无浏览器 api，需条件判断访问；生命周期副作用须限于客户端钩子；服务端数据须确定性且与客户端一致。

全局执行上下文在 SSR 中不能复用，每个请求必须创建全新的实例，否则会引发状态污染和数据错乱。

每个请求需独立应用实例

服务器端渲染时，Node.js 是单线程多请求环境。若在模块顶层或全局作用域创建 Vue/React 实例、store 或 router，该实例会被所有并发请求共享。例如，用户 A 的登录态可能意外覆盖用户 B 的路由参数。

• 正确做法：在每次 HTTP 请求处理函数内创建新实例，如 createApp() 或 new Vue()
• 避免在 app.js 或 entry-server.js 顶层 new store 或挂载插件
• Vue 3 推荐使用 createSSRApp，它自动隔离响应式状态

全局变量与浏览器 API 不可用

Node.js 环境没有 window、document、localStorage 等对象。若代码在全局上下文中直接访问它们，服务端会立即抛出 ReferenceError。

iSlide PPT

一款AI演示文稿工具，主要用于DeepSeek AI加持，输入主题生成专业PPT，支持Word/PDF等45种文档导入，职场汇报、教学提案轻松搞定，适合需要提升相关任务效率的用户。

下载

• 禁止在模块顶层或 data 函数中写 window.location.href
• 需要访问时，应包裹在 if (typeof window !== 'undefined') 或生命周期钩子（如 mounted）中
• 第三方库若内部依赖浏览器 API，需确认其 SSR 兼容性，或配置别名在服务端使用降级版本

生命周期与副作用需严格区分执行时机

SSR 只执行 beforeCreate 和 created，其余钩子（如 mounted、beforeUnmount）仅客户端运行。若在 created 中启动定时器、监听事件或修改全局状态，将无法清理，导致内存泄漏或跨请求干扰。

• 定时器、WebSocket 连接、全局事件监听等副作用，应移至 mounted 或 onMounted
• 服务端预取的数据应通过 asyncData 或 setup 中的 onServerPrefetch（Vue 3）统一管理
• 避免在 created 中调用 router.push 或 store.dispatch 触发非幂等操作

服务端数据响应需确定性与不可变性

SSR 渲染是同步、一次性过程。服务端返回的 HTML 必须与客户端“注水”（hydration）前的状态完全一致，否则 Vue/React 会报 hydration mismatch 错误。

• 服务端预取的数据应冻结或标记为非响应式（Vue 3 默认不将服务端数据转为 reactive）
• 避免在 created 中对 props 或初始 state 做异步修改（如 setTimeout(() => this.x = 1)）
• 确保服务端和客户端使用同一份数据快照，例如通过 window.__INITIAL_STATE__ 注入并由客户端 store 替换初始值