@vue/server-renderer

What is @vue/server-renderer?

The @vue/server-renderer package is designed for server-side rendering (SSR) of Vue.js applications. It allows developers to render Vue components on the server and send the rendered HTML to the client, improving the initial load time and SEO for Vue.js applications. This package is part of the Vue.js ecosystem and is specifically tailored for Vue 3.x applications.

What are @vue/server-renderer's main functionalities?

Rendering a Vue Component to a String

This feature allows you to render a Vue component to an HTML string on the server. This is useful for generating the initial HTML for a page on the server, which can then be sent to the client for faster initial load times and better SEO.

const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');

const app = createSSRApp({
  data: () => ({ msg: 'Hello, server-side rendering!' }),
  template: '<div>{{ msg }}</div>'
});

renderToString(app).then(html => {
  console.log(html);
});

Streaming a Vue Component

This feature enables streaming rendering of a Vue component. Instead of waiting for the entire component to be rendered before sending it to the client, the rendered output is streamed to the client as it's generated. This can improve the perceived performance of the application.

const { createSSRApp } = require('vue');
const { renderToNodeStream } = require('@vue/server-renderer');
const express = require('express');
const app = express();

const vueApp = createSSRApp({
  data: () => ({ msg: 'Hello, streaming SSR!' }),
  template: '<div>{{ msg }}</div>'
});

app.get('/', (req, res) => {
  res.setHeader('Content-Type', 'text/html');
  const stream = renderToNodeStream(vueApp);
  stream.pipe(res);
});

app.listen(3000);

0

README

@vue/server-renderer

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/server-renderer. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the vue/server-renderer deep import instead.

Basic API

renderToString

Signature

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

Usage

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

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

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

Handling Teleports

If the rendered app contains teleports, the teleported content will not be part of the rendered string. Instead, they are exposed under the teleports property of the ssr context object:

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

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

Streaming API

renderToNodeStream

Renders input as a Node.js Readable stream.

Signature

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

Usage

// 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.

Signature

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

Usage

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

renderToWebStream

Renders input as a Web ReadableStream.

Signature

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

Usage

// 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.

Signature

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

Usage

This is typically used in combination with TransformStream:

// 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.

Signature

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

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

Usage

let res = ''

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

Changelog

3.5.12 (2024-10-11)

Bug Fixes

• compiler-dom: avoid stringify option with null value (#12096) (f6d9926), closes #12093
• compiler-sfc: do not skip TSInstantiationExpression when transforming props destructure (#12064) (d3ecde8)
• compiler-sfc: use sass modern api if available and avoid deprecation warning (#11992) (4474c11)
• compiler: clone loc to ifNode (#12131) (cde2c06), closes vuejs/language-tools#4911
• custom-element: properly remove hyphenated attribute (#12143) (e16e9a7), closes #12139
• defineModel: handle kebab-case model correctly (#12063) (c0418a3), closes #12060
• deps: update dependency monaco-editor to ^0.52.0 (#12119) (f7cbea2)
• hydration: provide compat fallback for idle callback hydration strategy (#11935) (1ae545a)
• reactivity: trigger reactivity for Map key undefined (#12055) (7ad289e), closes #12054
• runtime-core: allow symbol values for slot prop key (#12069) (d9d4d4e), closes #12068
• runtime-core: fix required prop check false positive for kebab-case edge cases (#12034) (9da1ac1), closes #12011
• runtime-dom: prevent unnecessary updates in v-model checkbox when value is unchanged (#12146) (ea943af), closes #12144
• teleport: handle disabled teleport with updateCssVars (#12113) (76a8223), closes #12112
• transition/ssr: make transition appear work with Suspense in SSR (#12047) (f1a4f67), closes #12046
• types: ensure this.$props type does not include string (#12123) (704173e), closes #12122
• types: retain union type narrowing with defaults applied (#12108) (05685a9), closes #12106
• useId: ensure useId consistency when using serverPrefetch (#12128) (b4d3534), closes #12102
• watch: watchEffect clean-up with SSR (#12097) (b094c72), closes #11956

Performance Improvements

• reactivity: avoid unnecessary recursion in removeSub (#12135) (ec917cf)