虚拟DOM的SSR同构渲染原理

描述
虚拟DOM的SSR同构渲染是指同一套代码在服务端生成HTML字符串，在客户端通过虚拟DOM进行"激活"（Hydration）的过程。这解决了传统服务端渲染无法保持交互状态的问题。

核心问题

1. 服务端如何将组件渲染为HTML字符串？
2. 客户端如何复用服务端HTML并添加事件绑定？
3. 如何避免激活过程中的不匹配错误？

服务端渲染流程

步骤1：组件序列化为字符串

// 服务端使用renderToString将虚拟DOM转为字符串
import { renderToString } from 'vue/server-renderer'

const app = createApp(App)
const html = await renderToString(app)
// 输出: <div data-server-rendered="true">Hello</div>

• 虚拟DOM通过递归遍历生成纯文本HTML
• 添加data-server-rendered标记供客户端识别

步骤2：处理异步组件

// 服务端需要等待所有异步操作完成
const app = createApp({
  async setup() {
    const data = await fetchData() // 等待异步数据
    return { data }
  }
})

• 服务端渲染会深度遍历所有嵌套组件
• 确保所有异步操作完成后再输出HTML

客户端激活流程

步骤3：混合渲染（Hydration）

// 客户端使用createSSRApp进行混合
const app = createSSRApp(App)
app.mount('#app') // 不是重新创建DOM，而是激活现有DOM

激活过程详解：

1. DOM复用检查：对比虚拟DOM与服务端HTML结构
2. 属性同步：将服务端未序列化的属性（如事件）添加到DOM
3. 事件绑定：为DOM元素添加事件监听器

步骤4：虚拟DOM对比算法

function hydrate(vnode, container) {
  const existingDOM = container.firstChild // 获取现有DOM
  
  // 对比标签名和关键属性
  if (vnode.tag !== existingDOM.tagName.toLowerCase()) {
    // 不匹配时执行客户端渲染
    renderClient(vnode, container)
    return
  }
  
  // 递归处理子节点
  for (let i = 0; i < vnode.children.length; i++) {
    hydrate(vnode.children[i], existingDOM.childNodes[i])
  }
  
  // 添加事件监听等客户端特有逻辑
  addEventListeners(vnode, existingDOM)
}

关键优化策略

策略1：文本节点精确匹配

// 文本节点需要完全一致才能复用
if (vnode.type === Text) {
  if (existingDOM.nodeType === Node.TEXT_NODE) {
    if (vnode.children !== existingDOM.textContent) {
      // 文本内容不匹配时需要替换
      existingDOM.textContent = vnode.children
    }
  }
}

策略2：属性差异处理

function hydrateProps(vnode, dom) {
  const serverProps = getServerProps(dom) // 获取服务端渲染的属性
  const clientProps = vnode.props // 客户端期望的属性
  
  // 合并策略：以客户端为准，但保留服务端关键属性
  for (const key in clientProps) {
    if (key.startsWith('on')) {
      // 事件处理器只在客户端添加
      dom.addEventListener(key.slice(2).toLowerCase(), clientProps[key])
    } else if (serverProps[key] !== clientProps[key]) {
      // 属性不一致时以客户端为准
      dom.setAttribute(key, clientProps[key])
    }
  }
}

常见问题与解决方案

问题1：客户端-服务端状态不一致

// 错误示例：使用Date.now()会导致不匹配
const timestamp = Date.now() // 服务端和客户端值不同

// 解决方案：在mounted后设置动态值
const timestamp = ref(0)
onMounted(() => {
  timestamp.value = Date.now()
})

问题2：第三方库的SSR支持

// 检查是否在浏览器环境
if (typeof window !== 'undefined') {
  // 只在客户端执行
  import('client-only-library').then(module => {
    // 使用客户端专用库
  })
}

性能优化技巧

技巧1：组件级混合

<template>
  <div>
    <!-- 静态内容直接复用 -->
    <StaticContent />
    <!-- 动态内容延迟混合 -->
    <ClientOnly>
      <InteractiveComponent />
    </ClientOnly>
  </div>
</template>

<script>
export default {
  components: {
    ClientOnly: {
      mounted() {
        // 延迟加载交互组件
        this.$el.hydrate()
      }
    }
  }
}
</script>

技巧2：流式渲染优化

// 服务端流式渲染，逐步发送HTML
const stream = renderToNodeStream(app)
stream.pipe(res)

// 客户端逐步激活，提升首屏性能
const hydrator = createHydrator(stream)
hydrator.activateChunk(chunk)

总结
SSR同构渲染通过虚拟DOM的精确对比和智能激活机制，实现了服务端首屏渲染与客户端交互能力的完美结合。关键在于确保两端状态一致性，并优化混合过程的性能表现。