Server-Side Rendering API | Vue.js

Server-Side Rendering API
​
renderToString()
​

Exported from vue/server-renderer

Type

ts
function renderToString(
  input: App | VNode,
  context?: SSRContext
): Promise<string>

Example

js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`
})

;(async () => {
  const html = await renderToString(app)
  console.log(html)
})()
SSR Context
​

You can pass an optional context object, which can be used to record additional data during the render, for example accessing content of Teleports:

js
const ctx = {}
const html = await renderToString(app, ctx)

console.log(ctx.teleports) // { '#teleported': 'teleported content' }

Most other SSR APIs on this page also optionally accept a context object. The context object can be accessed in component code via the useSSRContext helper.

See also Guide - Server-Side Rendering

renderToNodeStream()
​

Renders input as a Node.js Readable stream.

Exported from vue/server-renderer

Type

ts
function renderToNodeStream(
  input: App | VNode,
  context?: SSRContext
): Readable

Example

js
// inside a Node.js http handler
renderToNodeStream(app).pipe(res)

Note

This method is not supported in the ESM build of vue/server-renderer, which is decoupled from Node.js environments. Use pipeToNodeWritable instead.

pipeToNodeWritable()
​

Render and pipe to an existing Node.js Writable stream instance.

Exported from vue/server-renderer

Type

ts
function pipeToNodeWritable(
  input: App | VNode,
  context: SSRContext = {},
  writable: Writable
): void

Example

js
// inside a Node.js http handler
pipeToNodeWritable(app, {}, res)
renderToWebStream()
​

Renders input as a Web ReadableStream.

Exported from vue/server-renderer

Type

ts
function renderToWebStream(
  input: App | VNode,
  context?: SSRContext
): ReadableStream

Example

js
// inside an environment with ReadableStream support
return new Response(renderToWebStream(app))

Note

In environments that do not expose ReadableStream constructor in the global scope, pipeToWebWritable() should be used instead.

pipeToWebWritable()
​

Render and pipe to an existing Web WritableStream instance.

Exported from vue/server-renderer

Type

ts
function pipeToWebWritable(
  input: App | VNode,
  context: SSRContext = {},
  writable: WritableStream
): void

Example

This is typically used in combination with TransformStream:

js
// TransformStream is available in environments such as CloudFlare workers.
// in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
const { readable, writable } = new TransformStream()
pipeToWebWritable(app, {}, writable)

return new Response(readable)
renderToSimpleStream()
​

Renders input in streaming mode using a simple readable interface.

Exported from vue/server-renderer

Type

ts
function renderToSimpleStream(
  input: App | VNode,
  context: SSRContext,
  options: SimpleReadable
): SimpleReadable

interface SimpleReadable {
  push(content: string | null): void
  destroy(err: any): void
}

Example

js
let res = ''

renderToSimpleStream(
  app,
  {},
  {
    push(chunk) {
      if (chunk === null) {
        // done
        console(`render complete: ${res}`)
      } else {
        res += chunk
      }
    },
    destroy(err) {
      // error encountered
    }
  }
)
useSSRContext()
​

A runtime API used to retrieve the context object passed to renderToString() or other server render APIs.

Type

ts
function useSSRContext<T = Record<string, any>>(): T | undefined

Example

The retrieved context can be used to attach information that is needed for rendering the final HTML (e.g. head metadata).

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

// make sure to only call it during SSR
// https://vitejs.dev/guide/ssr.html#conditional-logic
if (import.meta.env.SSR) {
  const ctx = useSSRContext()
  // ...attach properties to the context
}
</script>