renderComponent() — vue Function Reference

Architecture documentation for the renderComponent() function in render.ts from the vue codebase.

Function typescript ServerRenderer BundleRenderer calls 6 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ renderComponent() — vue Function Reference

Dependency Diagram

graph TD
  f98325d3_a650_0f85_8573_d782ecc5b533["renderComponent()"]
  53230fed_d564_80ea_bf1f_8c413f7b736f["renderNode()"]
  53230fed_d564_80ea_bf1f_8c413f7b736f -->|calls| f98325d3_a650_0f85_8573_d782ecc5b533
  c2f595b4_afdd_12e0_bb68_ce636e8e6952["renderAsyncComponent()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952 -->|calls| f98325d3_a650_0f85_8573_d782ecc5b533
  5fd67422_1e1f_130e_8b6b_804d8006d193["registerComponentForCache()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| 5fd67422_1e1f_130e_8b6b_804d8006d193
  5b855538_2046_796e_16f9_7327a61399cb["isDef()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| 5b855538_2046_796e_16f9_7327a61399cb
  cbb765a5_16f2_d102_c691_156f282d3846["renderComponentInner()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| cbb765a5_16f2_d102_c691_156f282d3846
  52c8eb6f_bc8d_0a16_cef4_069bbffe615e["renderComponentWithCache()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| 52c8eb6f_bc8d_0a16_cef4_069bbffe615e
  299f2646_f776_9b7d_1179_7b9087b1e66c["isUndef()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| 299f2646_f776_9b7d_1179_7b9087b1e66c
  fef82ef1_c853_c642_2deb_02c317cb0187["warnOnce()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| fef82ef1_c853_c642_2deb_02c317cb0187
  style f98325d3_a650_0f85_8573_d782ecc5b533 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/render.ts lines 111–173

function renderComponent(node, isRoot, context) {
  const { write, next, userContext } = context

  // check cache hit
  const Ctor = node.componentOptions.Ctor
  const getKey = Ctor.options.serverCacheKey
  const name = Ctor.options.name
  const cache = context.cache
  const registerComponent = registerComponentForCache(Ctor.options, write)

  if (isDef(getKey) && isDef(cache) && isDef(name)) {
    const rawKey = getKey(node.componentOptions.propsData)
    if (rawKey === false) {
      renderComponentInner(node, isRoot, context)
      return
    }
    const key = name + '::' + rawKey
    const { has, get } = context
    if (isDef(has)) {
      has(key, hit => {
        if (hit === true && isDef(get)) {
          get(key, res => {
            if (isDef(registerComponent)) {
              registerComponent(userContext)
            }
            res.components.forEach(register => register(userContext))
            write(res.html, next)
          })
        } else {
          renderComponentWithCache(node, isRoot, key, context)
        }
      })
    } else if (isDef(get)) {
      get(key, res => {
        if (isDef(res)) {
          if (isDef(registerComponent)) {
            registerComponent(userContext)
          }
          res.components.forEach(register => register(userContext))
          write(res.html, next)
        } else {
          renderComponentWithCache(node, isRoot, key, context)
        }
      })
    }
  } else {
    if (isDef(getKey) && isUndef(cache)) {
      warnOnce(
        `[vue-server-renderer] Component ${
          Ctor.options.name || '(anonymous)'
        } implemented serverCacheKey, ` +
          'but no cache was provided to the renderer.'
      )
    }
    if (isDef(getKey) && isUndef(name)) {
      warnOnce(
        `[vue-server-renderer] Components that implement "serverCacheKey" ` +
          `must also define a unique "name" option.`
      )
    }
    renderComponentInner(node, isRoot, context)
  }
}