Vue 3源码极客之：`Vue`的`SSR`：`renderToString`的`sync`和`async`渲染。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是今晚的讲师，老猫。今天咱们聊聊 Vue 3 源码里 SSR (Server-Side Rendering) 这块的硬骨头，特别是 renderToString 里面的 sync 和 async 两种渲染模式。这玩意儿搞明白了，以后面试官再问你 SSR，你就直接把他们问到怀疑人生。

第一节：SSR 是个啥？为啥要用它？

先别急着看代码，咱们得先搞清楚 SSR 是干嘛的。简单来说，SSR 就是把 Vue 组件在服务端预先渲染成 HTML 字符串，然后直接发给浏览器。

那为啥要这么折腾？直接在浏览器里跑 Vue 它不香吗？

香是香，但有些场景下，SSR 优势太明显了：

SEO 优化： 搜索引擎爬虫对 JavaScript 执行能力有限，SSR 直接给它 HTML，它就能轻松抓取到内容，提高网站排名。
首屏加载速度： 用户不用等 JavaScript 下载、解析、执行，直接看到服务端渲染好的 HTML，首屏速度嗖嗖的。
更好的用户体验： 尤其是在网络环境差的情况下，SSR 能更快地呈现内容，避免长时间白屏。

当然，SSR 也有缺点：

服务器压力： 每次请求都要在服务端渲染，服务器压力大。
开发复杂度： SSR 需要考虑服务端环境，开发调试更复杂。
Node.js 环境依赖： 需要 Node.js 环境来运行 Vue 服务端渲染代码。

所以，要不要用 SSR，得根据实际情况权衡利弊。

第二节：renderToString：SSR 的核心引擎

Vue 3 提供了 renderToString 方法，它是 SSR 的核心引擎，负责把 Vue 组件渲染成 HTML 字符串。

import { createSSRApp, renderToString } from 'vue'

// 创建一个 Vue 应用实例
const app = createSSRApp({
  data: () => ({ message: 'Hello, SSR!' }),
  template: '<div>{{ message }}</div>'
})

// 渲染成 HTML 字符串
renderToString(app).then((html) => {
  console.log(html) // 输出: <div>Hello, SSR!</div>
})

这段代码很简单，但背后却隐藏着不少细节。renderToString 内部会调用 Vue 的虚拟 DOM (Virtual DOM) 渲染器，把组件的虚拟 DOM 树转换成真实的 HTML 字符串。

第三节：sync 渲染：同步渲染的简单粗暴

renderToString 默认情况下是异步渲染的，但 Vue 3 也提供了同步渲染的方式，通过 renderToString 的第二个参数可以配置：

import { renderToString } from 'vue'

// 同步渲染
const html = renderToString(app, { mode: 'sync' })
console.log(html)

同步渲染的好处是简单粗暴，直接返回 HTML 字符串，不用 Promise，代码更简洁。但它的缺点也很明显：

阻塞事件循环： 同步渲染会阻塞 Node.js 的事件循环，如果组件渲染时间过长，会导致服务器响应变慢。
无法处理异步组件： 如果组件内部有异步逻辑（比如异步组件、异步计算属性），同步渲染会出错。

所以，除非你的组件非常简单，否则不建议使用同步渲染。

第四节：async 渲染：异步渲染的优雅之道

异步渲染是 renderToString 的默认模式，它通过 Promise 来处理异步操作，避免阻塞事件循环。

import { renderToString } from 'vue'

// 异步渲染
renderToString(app).then((html) => {
  console.log(html)
})

异步渲染的优点：

不阻塞事件循环： 异步操作不会阻塞事件循环，服务器响应更流畅。
支持异步组件： 可以处理组件内部的异步逻辑。

异步渲染的缺点：

代码稍微复杂： 需要使用 Promise 来处理异步结果。

第五节：源码剖析：renderToString 的内部实现

光说不练假把式，咱们来扒一扒 renderToString 的源码，看看它是怎么实现同步和异步渲染的。

renderToString 的核心代码在 packages/server-renderer/src/renderToString.ts 文件中。

简化后的代码结构如下：

import { render } from '@vue/runtime-core'
import { ssrUtils } from './ssrUtils'

export async function renderToString(
  vnode: VNode,
  options: SSRRenderContext = {}
): Promise<string> {
  const {
    mode = 'async', // 默认为异步模式
    ...rest
  } = options

  const context: SSRContext = {
    ...rest,
    // ... 其他属性
  }

  const [result, push] = ssrUtils.createBuffer() // 创建一个缓冲区

  try {
    render(vnode, null, context, push, ssrUtils) // 调用核心渲染函数
    if (mode === 'sync') {
      return result.join('') // 同步模式直接返回结果
    } else {
      await context.promise // 等待所有异步组件渲染完成
      return result.join('') // 异步模式等待 Promise 完成后返回结果
    }
  } catch (e: any) {
    // ... 错误处理
    throw e
  }
}

这段代码的关键点：

mode 参数： 决定了是同步渲染还是异步渲染，默认为 async。
ssrUtils.createBuffer()： 创建一个缓冲区，用于存储渲染结果。
render()： 调用核心渲染函数，把虚拟 DOM 渲染成 HTML 片段。这个 render 函数实际上是 @vue/runtime-core 里面的 render 函数，经过了一些 SSR 特殊处理。
context.promise： 这是一个 Promise 对象，用于等待所有异步组件渲染完成。只有在异步模式下才会被用到。

第六节：异步组件的 SSR 处理

异步组件是 SSR 的一个难点。Vue 3 的 Suspense 组件可以很好地处理异步组件的 SSR。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}
</script>

Suspense 组件会等待 AsyncComponent 加载完成，然后再渲染。在 SSR 过程中，Suspense 会把异步组件的 Promise 收集起来，放到 context.promise 中，renderToString 会等待 context.promise 完成后再返回 HTML 字符串。

第七节：SSRContext：SSR 的上下文信息

SSRContext 是 SSR 的上下文信息，它包含了渲染过程中需要用到的各种数据，比如：

modules：用于收集组件的 CSS 模块信息。
teleports：用于处理 Teleport 组件的渲染。
promise：用于收集异步组件的 Promise。
nonce：用于 CSP (Content Security Policy) 策略。

在组件内部，可以通过 useSSRContext() 来访问 SSRContext：

<script setup>
import { useSSRContext } from 'vue'

const ssrContext = useSSRContext()

if (ssrContext) {
  // 在服务端渲染时执行
  ssrContext.modules.push('my-component')
}
</script>

第八节：实战演练：搭建一个简单的 SSR 应用

理论讲了一大堆，咱们来动手搭一个简单的 SSR 应用。

初始化项目：
```
npm init vue@latest my-ssr-app
cd my-ssr-app
npm install
```
选择 Add server-side rendering (SSR)。

修改 src/App.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const message = ref('Hello, Client!')

onMounted(() => {
  message.value = 'Hello, Browser!'
})
</script>

运行项目：
```
npm run dev:ssr
```
打开浏览器，访问 http://localhost:5173，你会看到服务端渲染的 HTML。查看页面源代码，可以看到 <h1>Hello, Client!</h1>，说明 SSR 成功了。

第九节：踩坑指南：SSR 常见问题及解决方案

SSR 看起来很美好，但实际开发中会遇到各种各样的问题。这里列举一些常见的坑，并给出解决方案：

问题	解决方案
`window`、`document` 等浏览器 API 报错	在服务端渲染时，`window`、`document` 等浏览器 API 是不存在的。需要在组件中使用 `process.server` 或 `process.client` 来判断当前环境，只在客户端执行需要浏览器 API 的代码。
异步组件 SSR 渲染不正确	确保使用 `Suspense` 组件包裹异步组件，并正确处理 `fallback` 内容。检查 `context.promise` 是否正确收集了所有异步组件的 Promise。
CSS 样式丢失	使用 CSS Modules 或 CSS-in-JS 方案，并在 SSR 过程中收集组件的 CSS 模块信息，然后把 CSS 嵌入到 HTML 中。 `vue-style-loader` 可以帮助你收集 CSS 模块信息。
SEO 效果不佳	检查页面 title、meta 等 SEO 相关标签是否正确设置。确保服务端渲染的 HTML 包含了所有重要的内容。使用 Google Search Console 等工具来分析网站的 SEO 情况。
缓存问题	合理使用缓存策略，避免重复渲染。可以使用 Redis 等缓存数据库来存储渲染结果。根据页面内容的变化频率来设置缓存过期时间。

第十节：总结与展望

今天咱们深入了解了 Vue 3 SSR 的 renderToString 方法，学习了同步和异步渲染的原理和实现。SSR 是一项复杂的技术，需要深入理解 Vue 的渲染机制和 Node.js 的运行原理。希望今天的讲座能帮助大家更好地掌握 SSR，打造更高效、更友好的 Vue 应用。

未来，SSR 的发展方向是更加智能化、自动化。比如，可以利用 AI 技术来优化渲染性能，自动生成 SEO 友好的 HTML。同时，Serverless SSR 也是一个趋势，可以把 SSR 部署到云函数上，降低运维成本。

好了，今天的讲座就到这里。感谢大家的聆听！如果还有什么问题，欢迎随时提问。

发表回复 取消回复

发表回复取消回复