javascript如何实现服务端渲染【教程】

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();
res.send(`
  
  
    
      ${html}
      
    
  
`);

Vue 3 的 renderToString 需要 createSSRApp

Vue 3 的 SSR 不再兼容普通 createApp，必须用专用的 SSR 入口。

• 服务端入口不能直接 import .vue 单文件组件，需用 defineAsy

  

  ncComponent 或预编译 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 的
• 客户端启动时优先读取 window.__INITIAL_STATE__，避免重复请求
• 注意时间戳、随机数、Date.now() 这类非幂等操作——服务端和客户端值不同，必然导致 mismatch

SSR 的核心难点不在渲染函数本身，而在于环境隔离、数据流对齐和生命周期错位。很多问题只在构建部署后暴露，本地开发容易误判为“已跑通”。