HTML SSR服务端渲染优化方案

本文深入剖析了HTML服务端渲染（SSR）的本质与实践要点，明确指出HTML本身无法实现SSR，其核心在于服务端（如Node.js）动态调用框架API（如React的renderToString或Vue的server renderer）实时生成含真实内容的HTML字符串，并精准注入初始状态以支持客户端水合；文章直击常见误区——仅修改静态index.html仍是CSR、服务端误用浏览器API、数据未等待即渲染等，并给出React/Vue SSR的关键代码范式、典型报错解决方案及首屏性能优化三大抓手（数据预取、HTML压缩、关键CSS内联），强调SSR成败的关键不在渲染能力，而在于服务端对“渲染什么”和“何时完成”的精细掌控，稍有疏漏便退化为白屏的CSR体验。

HTML 本身不能直接实现 SSR，SSR 的核心是服务端动态生成含真实内容的 html 字符串并返回，不是靠静态 HTML 文件达成的。所谓“HTML 实现 SSR”，本质是让服务端（Node.js、Java、Python 等）在响应请求时，把框架组件（如 React/Vue）渲染成字符串，再拼进 模板里发给浏览器。

为什么不能只改 index.html 就算 SSR？

静态 index.html 文件无论怎么写，只要没经过服务端逻辑执行，就只是 CSR 的壳——浏览器拿到后仍是空

Node.js + React 最简 SSR 路由入口怎么写？

关键不是写 HTML，而是让 Express/Koa 在 app.get('*') 中调用渲染函数：

const { renderToString } = require('react-dom/server');
const App = require('./src/App').default;

app.get('*', (req, res) => {
  const html = renderToString();
  const initialState = { url: req.url };
  res.send(`
    
    
      
${html}
      
      
    
  `);
});

• renderToString 是 React 官方 SSR 入口，必须在服务端环境调用；客户端的 ReactDOM.createRoot 不行
• 务必传入 req.url，否则路由不匹配、数据获取错乱
• window.__INITIAL_STATE__ 是 hydrate 同构的关键，漏掉会导致页面闪动或交互失效
• 不要在服务端用 useEffect 触发数据请求——它不会执行；要用 getServerSideProps（Next.js）或手动 fetch（自建）

Vue SSR 的 createBundleRenderer 常见报错怎么绕开？

用 vue-server-renderer 时，createBundleRenderer 报 document is not defined 或 Cannot find module 'vue' 是高频问题：

• 确保构建产物是 server bundle（target: 'node'），不是浏览器用的 client bundle
• 服务端代码里不能出现 document、window、localStorage 等浏览器专属 API
• require('vue') 报错，大概率是 package.json 里 "main" 指向了 esm 版本，需显式指定 require('vue/dist/vue.runtime.common.js')
• 组件内使用 mounted() 钩子会静默失败，应改用 beforeMount() 或提取逻辑到 created()

首屏优化效果为什么没体现？检查这三点

即使 SSR 渲染成功，LCP（最大内容绘制）仍可能延迟，常见原因：

• 服务端异步数据没等完就调用了 renderToString：必须 await 所有 fetch 或 Promise，否则返回空内容
• HTML 返回前未压缩：启用 res.set('Content-Encoding', 'gzip') 或用 compression 中间件，大页面可减半传输时间
• CSS 没内联或阻塞：关键 CSS 必须用
  

  密码登录在这里

  微信扫码登录或注册

  

  打开微信扫一扫，快速登录/注册

  登录即同意 用户协议 和 隐私政策

  微信登录更方便

  • 密码登录
  • 注册账号

  

  忘记密码

  登录

  

  注册

  登录即同意 用户协议 和 隐私政策

  返回登录

  • 重置密码

  发送验证码

  重置密码