javascript 本身不能直接实现服务端渲染（ssr），必须运行在 node.js 环境中并配合框架或手动调用 rendertostring/rendertonodestream 等 api；纯浏览器端 javascript 无法 ssr。
JavaScript 本身不能直接实现服务端渲染（SSR），它需要运行在 Node.js 环境中，并配合框架或手动调用 renderToString / renderToNodeStream 等 API 才能完成。纯浏览器端的 JavaScript 无法 SSR。
为什么 document 在 Node.js 里不可用
服务端没有 DOM，document、window、localStorage 等浏览器全局对象在 Node.js 中未定义。直接运行依赖它们的前端代码会抛出 ReferenceError: document is not defined。
- React/Vue/Angular 的 SSR 入口必须避开客户端专属逻辑（比如组件挂载后才执行的
useEffect或mounted） - 第三方库若内部访问
window，需用typeof window !== 'undefined'包裹，或通过 Webpack 的target: 'node'+externals隔离 - 静态资源路径（如
public/下的图片）在服务端需转为path.join(__dirname, '../public')，不能靠相对 URL
React 中用 renderToString 做最简 SSR
这是 React 官方支持的同步 SSR 方式，适用于首屏内容确定、无异步数据获取的场景。
- 必须使用
ReactDOMServer.renderToString，不是ReactDOM.render - 组件必须是纯函数组件或 class 组件，且不能依赖浏览器 API
- 服务端需提前注入初始 props（比如从数据库或 API 获取的数据），再传给组件
- 示例关键代码：
import { renderToString } from 'react-dom/server';
import App from './App.js';
const html = renderToString(<App data={initialData} />);
res.send(`
<!DOCTYPE html>
<html>
<body>
<div id="root">${html}</div>
<script src="/client.js"></script>
</body>
</html>
`);
Vue 3 的 renderToString 需要 createSSRApp
Vue 3 的 SSR 不再兼容普通 createApp，必须用专用的 SSR 入口。
立即学习“Java免费学习笔记（深入）”；
- 服务端入口不能直接 import
.vue单文件组件，需用defineAsyncComponent或预编译 SFC - 必须调用
createSSRApp创建应用实例，否则renderToString会报错 - 响应式状态在服务端不触发更新，所以所有数据应通过
props或provide/inject注入，而非ref或reactive后动态改 - 常见错误：
TypeError: Cannot read property 'push' of undefined—— 通常是因为路由未用createMemoryHistory初始化
真实项目绕不开数据预取和水合 mismatch
只渲染 HTML 不够，客户端 JS 加载后必须“水合”（hydrate）服务端生成的 DOM。一旦服务端与客户端渲染结果不一致，Vue 会警告 Hydration failed，React 则会丢弃整个节点并重新渲染。
- 数据获取不能写在
useEffect或onMounted里——服务端不执行这些钩子，导致首屏没数据 - 推荐方案：在路由组件上定义
asyncData或load方法，服务端提前调用并把结果序列化进 HTML 的<script window.__initial_state__></script> - 客户端启动时优先读取
window.__INITIAL_STATE__，避免重复请求 - 注意时间戳、随机数、
Date.now()这类非幂等操作——服务端和客户端值不同，必然导致 mismatch
SSR 的核心难点不在渲染函数本身，而在于环境隔离、数据流对齐和生命周期错位。很多问题只在构建部署后暴露，本地开发容易误判为“已跑通”。
