HTML本身不能直接实现SSR，SSR的核心是服务端动态生成含真实内容的HTML字符串并返回，需通过Node.js等环境调用框架渲染API（如renderToString）实时执行，而非仅修改静态index.html文件。
HTML 本身不能直接实现 SSR，SSR 的核心是服务端动态生成含真实内容的 html 字符串并返回，不是靠静态 HTML 文件达成的。所谓“HTML 实现 SSR”，本质是让服务端（Node.js、Java、Python 等）在响应请求时，把框架组件（如 React/Vue）渲染成字符串，再拼进 <html> 模板里发给浏览器。
为什么不能只改 index.html 就算 SSR？
静态 index.html 文件无论怎么写，只要没经过服务端逻辑执行，就只是 CSR 的壳——浏览器拿到后仍是空 <div id="root"></div>，后续全靠 JS 渲染。搜索引擎爬虫和慢网用户看到的还是白屏或 loading。真正的 SSR 必须在每次请求时，由服务端调用框架的 SSR API（如 renderToString）实时生成内容。
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(<App url={req.url} />);
const initialState = { url: req.url };
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
<script src="/static/bundle.js"></script>
</body></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 必须用
<style>标签内联在<head>，否则浏览器解析完 HTML 后还得去加载外部 CSS 才能绘制
SSR 的复杂点不在“能不能渲染”，而在“渲染什么”和“何时渲染完成”——数据获取时机、同构状态同步、错误边界处理，这些都发生在服务端，但表现却直接影响首屏体验。漏掉任一环，就退回 CSR 白屏状态。
