@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

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)

In the ESM build of @vue/server-renderer, which is decoupled from Node.js environments, the Readable constructor must be explicitly passed in as the 3rd argument:

import { Readable } from 'stream'

renderToNodeStream(app, {}, Readable).pipe(res)

renderToWebStream

Renders input as a Web ReadableStream.

Signature

function renderToWebStream(
  input: App | VNode,
  context?: SSRContext,
  Ctor?: { new (): ReadableStream }
): ReadableStream

Usage

// e.g. inside a Cloudflare Worker
return new Response(renderToWebStream(app))

Note in environments that do not expose ReadableStream constructor in the global scope, the constructor must be explicitly passed in as the 3rd argument. For example in Node.js 16.5.0+ where web streams are also supported:

import { ReadableStream } from 'stream/web'

const stream = renderToWebStream(app, {}, ReadableStream)

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
    }
  }
)