SSR 框架的工作原理是什么？

SSR 框架通过服务器端渲染 HTML 内容，提升 SEO 和首次加载速度。核心包括数据预获取、服务器渲染和客户端水合三个阶段。

服务端渲染中等 SSR Next.js Nuxt.js

SSR（服务器端渲染）框架的核心原理是基于以下过程：服务器在接收到用户请求时，直接在服务器端渲染 HTML 内容并发送到客户端，以避免客户端首次加载延迟并提升 SEO 效果，其具体实现包括三个阶段：

数据预获取过程：在服务器端，框架使用特定数据函数收集页面所需数据。在 Next.js 中借助 getServerSideProps 函数获取数据（例如 Fetch API 调用后端），再将数据注入到页面组件的 Props 中。Nuxt.js 通过类似机制如 asyncData 实现相同功能。示例代码：
```
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
```
服务器渲染过程：Node.js 服务器端使用 React（Next.js）或 Vue（Nuxt.js）引擎将组件及其数据实时渲染为静态 HTML，生成完整的 DOM 结构。这一步包括 HTML 标签组装、CSS 合并以及初始 JS 代码的封装。优势在于用户在收到响应前页面已准备就绪。
客户端水合（Hydration）过程：浏览器收到服务器发送的完整 HTML 进行首屏渲染后，下载框架的客户端捆绑 JS 并运行它，Hydration 会将静态页面“激活”转为动态、可交互状态，保持组件状态同步而不重置初始渲染结果。

框架的核心设计还包括内置的优化机制如按需渲染和缓存策略，以支持混合渲染模式并增强跨平台开发能力。