async/await在SSR中的核心作用是确保数据获取完成后再渲染HTML，避免空内容或状态不一致；需在框架预取函数（如getServerSideProps）或手动SSR中await数据后调用renderToString，并规避浏览器API、统一请求地址、同步服务端与客户端状态。
在服务端渲染（SSR）中，async/await 的核心作用是让数据获取逻辑在 HTML 生成前完成，确保返回的 HTML 已包含真实内容。关键不是“等完再发响应”，而是把异步数据拉取与组件渲染串行组织好，避免空内容、状态不一致或运行时报错。
在框架约定的预取函数里用 async/await
主流 SSR 框架提供了专门的异步数据入口，这些函数会在服务端执行、阻塞 HTML 渲染，直到 Promise 完成：
-
Next.js：在页面组件中导出
getServerSideProps，它必须是 async 函数，内部可自由 await API 请求、数据库查询等 -
Nuxt 3：使用
useAsyncData或defineEventHandler，自动在服务端执行并序列化结果 -
SvelteKit：在
+page.server.ts中导出 load 函数，支持顶层 await 和 async/await
这些函数返回的数据会作为 props 注入组件，React/Vue/Svelte 在服务端调用 renderToString 时已拿到完整数据，渲染出的 HTML 是“带内容的”。
手动 SSR 时用 await 等待数据再调用 renderToString
若用 Express + ReactDOMServer 手写 SSR，需显式控制执行顺序：
立即学习“Java免费学习笔记（深入）”；
- 路由处理函数声明为
async - 先
await fetch('/api/data')获取数据 - 再传入数据调用
renderToString(<App data={data} />) - 最后拼接 HTML 并
res.send()
不能把 renderToString 放在 await 外面，否则渲染时 data 还是 undefined 或 Promise，导致空白页或报错。
避开浏览器专属 API，防止 SSR 崩溃
服务端环境（Node.js）没有 window、document、localStorage 等对象，任何在预取阶段直接访问它们的代码都会抛出 ReferenceError：
- 检查所有第三方库是否支持 SSR；不支持的，只在客户端用
useEffect或if (typeof window !== 'undefined')包裹 - API 请求地址要统一，避免前端用相对路径
/api/user、服务端却因无 base URL 报错，建议用完整 URL 或配置公共请求函数 - 图片懒加载、字体加载、埋点初始化等副作用操作，一律延迟到客户端水合后执行
保持状态同步，避免水合 mismatch
服务端渲染出的 HTML 和客户端首次 hydrate 时的状态必须一致，否则 React 会警告甚至丢弃 DOM：
- 把服务端获取的数据通过
<script>window.__INITIAL_STATE__ = ...</script>注入 HTML - 客户端启动时从
window.__INITIAL_STATE__初始化 store 或 state，而不是重新发起请求 - 确保服务端和客户端使用同一套数据处理逻辑（如日期格式化、过滤规则），避免因环境差异导致内容不一致
