答案：通过设计通用vnode结构和render函数，实现轻量级SSR虚拟DOM。定义h函数创建vnode对象，包含tag、props、children；服务端用renderToString将vnode递归转为HTML字符串；客户端用mount函数生成真实DOM并挂载，支持更新；vnode纯数据化确保同构兼容，避免依赖DOM或window，通过构建工具共用代码，实现首屏渲染优化与客户端激活。
实现一个支持 SSR（服务端渲染）的轻量级虚拟 DOM，核心在于设计一套通用的 vnode 结构，在浏览器和 Node.js 环境中都能运行。重点是将视图抽象为可序列化的对象，并提供 render 函数分别在服务端生成 HTML 字符串、在客户端进行挂载与更新。
定义 VNode 结构
vnode 是对真实 DOM 节点的描述，用普通对象表示，包含标签名、属性、子节点等信息。
function h(tag, props, children) {
return {
tag,
props: props || {},
children: children || []
};
}
例如：h('div', { id: 'app' }, [h('span', {}, ['Hello'])]) 会生成一个描述结构的对象，不依赖 DOM API，可在服务端直接使用。
实现服务端渲染（SSR）
在 Node.js 中，把 vnode 转为 HTML 字符串。遍历 vnode 树，递归拼接标签与属性。
function renderToString(vnode) {
if (typeof vnode === 'string') return vnode;
const { tag, props, children } = vnode;
let attrs = '';
for (const [key, value] of Object.entries(props)) {
attrs += ` ${key}="${value}"`;
}
const inner = (Array.isArray(children)
? children.map(renderToString).join('')
: ''
);
return `<${tag}${attrs}>${inner}`;
}
这样就能在服务器上把虚拟树转成完整 HTML 发送给浏览器，提升首屏加载体验。
实现客户端挂载与更新
在浏览器中，需要将 vnode 映射为真实 DOM 节点，并支持后续 diff 更新。
创建元素函数：
function mount(vnode, container) {
const el = document.createElement(vnode.tag);
// 设置属性
for (const [key, value] of Object.entries(vnode.props)) {
el.setAttribute(key, value);
}
// 处理子节点
if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
if (typeof child === 'string') {
el.appendChild(document.createTextNode(child));
} else {
mount(child, null);
el.appendChild(child.el);
}
});
}
vnode.el = el; // 缓存真实节点
container && container.appendChild(el);
}
简单 diff 可以对比新旧 vnode 的 tag 和 key，决定是否复用节点或重新创建。为了轻量，可以先不做精细化 diff，全量替换子树。
统一接口，支持同构
确保 h 和渲染逻辑在前后端共用。通过构建工具（如 Webpack 或 Vite）打包同一份 vnode 代码，让组件既能用于 SSR 输出字符串，也能在客户端激活（hydrate）。
关键点：
- vnode 必须是纯数据，不能包含 DOM 引用
- 避免在组件中直接使用 window、document
- 客户端激活时，可跳过已存在的 DOM，绑定事件即可
基本上就这些。不需要 React 那样复杂的调度和 fiber 架构，轻量级场景下，几十行代码就能跑通 SSR + 客户端渲染流程。
