跳到主要内容

createRenderer

createRenderer 函数是 Vue 3 SSR（服务器端渲染）的核心，它由 Vue 的 @vue/server-renderer 包提供。该函数负责创建一个渲染器实例，这个实例包含了将 Vue 组件渲染为 HTML 字符串的方法和逻辑。在 Vue 2 中，这个功能由 vue-server-renderer 包提供。

基本原理​

createRenderer 的基本原理涉及到 Vue 组件渲染成虚拟 DOM（VNode），然后将这些 VNode 转换（序列化）为 HTML 字符串的过程。它允许开发者自定义渲染输出，适用于不同的环境（如服务器端渲染、静态站点生成等）。

createRenderer 的关键特性​

  1. 可插拔的架构：createRenderer 允许通过传入自定义的渲染选项来扩展渲染器的能力，比如自定义指令的服务器端实现，或是自定义组件的序列化逻辑。
  2. 流式渲染支持：对于大型应用，createRenderer 支持流式渲染（streaming rendering），允许逐步发送响应，而不是等待整个视图渲染完成。这有助于提高首屏加载速度。
  3. SSR 上下文：在服务器端渲染过程中，createRenderer 会管理一个渲染上下文（context），这个上下文用于收集组件生命周期中产生的一些信息，如异步数据预取、头信息管理等。

实现原理简述​

  1. 创建渲染器实例：通过调用 createRenderer 并传入自定义的渲染选项，创建一个渲染器实例。这些选项包括如何处理不同类型的节点（元素节点、文本节点等）、如何实现指令等。
  2. 组件渲染：当渲染器接收到一个 Vue 组件时，它会开始渲染过程。首先，将组件渲染成虚拟 DOM 树。
  3. VNode 树遍历和序列化：渲染器遍历整个 VNode 树，并根据传入的渲染选项将 VNode 转换为 HTML 字符串。这个过程可能是递归的，因为组件可能嵌套其他组件。
  4. 异步组件和数据预取：如果遇到异步组件或需要执行数据预取的操作，渲染器会等待这些操作完成，并将结果反映在最终的 HTML 输出中。
  5. HTML 字符串输出：最终，渲染器输出一个 HTML 字符串，这个字符串可以通过 HTTP 响应发送给客户端。
import { createRenderer } from '@vue/server-renderer'
import { createApp } from 'vue'
import App from './App.vue'

const { renderToString } = createRenderer()

const app = createApp(App)

renderToString(app).then((html) => {
  console.log(html)
}).catch((err) => {
  console.error(err)
})