SSR通过服务端执行JavaScript生成HTML，而非将HTML转为JS；其核心是利用框架（如React、Vue）或模板引擎将组件或模板编译为可执行的JS函数，在构建阶段完成“HTML模板→JS模块”的预转换，实现高效同构渲染。
服务器端渲染（SSR）本身并不直接将 HTML 预转换为 JS，而是通过服务端运行 JavaScript 来动态生成 HTML 字符串并发送给客户端。但你提到的“将 HTML 预转换为 JS”，实际上是指在 SSR 架构中，如何利用 JavaScript 模板或框架（如 React、Vue 等）在服务端把组件或模板编译成可执行的 JS 逻辑，进而输出 HTML。
下面从实现机制和常见做法来说明这一过程。
1. SSR 中 HTML 是如何生成的
在典型的 SSR 流程中，服务器接收到请求后，会使用 Node.js 运行前端框架代码，调用组件的渲染方法，生成对应的 HTML 字符串，再将其注入到页面模板中返回给浏览器。
例如，在 React 中使用 renderToString：
立即学习“前端免费学习笔记（深入）”；
import { renderToString } from 'react-dom/server';
import App from './App';
const html = renderToString(<App />);
res.send(`
<html>
<body><div id="root">${html}</div></body>
</html>
`);
这里，App 组件是用 JSX 写的，本质是 JS 代码，Node.js 服务端执行它，将其“渲染”为 HTML 字符串。所以不是“把 HTML 转成 JS”，而是用 JS 生成 HTML。
2. 模板预编译：把模板转为可执行函数
某些 SSR 场景下，比如使用模板引擎（如 EJS、Pug、Handlebars），会提前把 HTML 模板编译成 JS 函数，提升渲染性能。
以 Handlebars 为例：
- 原始模板：
<p>Hello {{name}}</p> - 预编译后生成一个 JS 函数：
function(context) {
return "<p>Hello " + context.name + "</p>";
}
服务器运行时直接调用该函数传入数据，快速生成 HTML。这种方式称为“模板预编译”，实现了“HTML 模板 → JS 函数”的转换，便于服务端高效渲染。
3. 构建工具中的预转换流程
现代前端构建工具（如 Webpack、Vite）可以在打包阶段将 .vue 或 .jsx 文件解析为可执行的 JS 模块。
例如 Vue 单文件组件：
<template><div>Hello</div></template>- 构建时被编译为 render 函数（JS 代码）
- 服务端导入该组件后，可直接用
renderToString(vueApp)生成 HTML
这一步的“预转换”发生在构建阶段，开发者无需手动处理。
4. 同构应用：JS 在服务端和浏览器共用
SSR 的核心优势是“同构”——同一套 JS 代码既能在服务端运行生成 HTML，也能在浏览器端接管交互。
流程如下：
- 服务端用 JS 渲染出 HTML 发送
- HTML 中引入相同的 JS 文件
- 浏览器加载 JS 后“激活”页面（hydration），绑定事件等
整个过程依赖的是：组件和逻辑都写在 JS 中，HTML 是 JS 执行的结果。
基本上就这些。所谓的“将 HTML 预转换为 JS”，其实是把模板或组件编译为可执行的 JavaScript 函数或模块，以便在服务端动态生成 HTML。这不是反向转换，而是一种基于 JS 的渲染机制设计。不复杂但容易忽略。
