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
  9be52295_4e01_b6fd_a016_873e7cb61153["renderComponent()"]
  41d8a2ed_7600_023d_56ff_e6bd2066a1b0["renderNode()"]
  41d8a2ed_7600_023d_56ff_e6bd2066a1b0 -->|calls| 9be52295_4e01_b6fd_a016_873e7cb61153
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7["renderAsyncComponent()"]
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 -->|calls| 9be52295_4e01_b6fd_a016_873e7cb61153
  53f01abe_8351_b7b9_b0eb_09fd4e96879f["registerComponentForCache()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| 53f01abe_8351_b7b9_b0eb_09fd4e96879f
  2be3818d_a4f3_495c_543c_ee071b428982["isDef()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| 2be3818d_a4f3_495c_543c_ee071b428982
  b912b998_19db_0074_fde6_8126c7f548f0["renderComponentInner()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| b912b998_19db_0074_fde6_8126c7f548f0
  6b211741_5417_3681_068b_2bcb38fded30["renderComponentWithCache()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| 6b211741_5417_3681_068b_2bcb38fded30
  a1f5b8ca_b6d5_6b24_155e_038685c97c85["isUndef()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| a1f5b8ca_b6d5_6b24_155e_038685c97c85
  d6e38b19_e9d3_06e8_3caf_f46598422fd8["warnOnce()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| d6e38b19_e9d3_06e8_3caf_f46598422fd8
  style 9be52295_4e01_b6fd_a016_873e7cb61153 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)
  }
}