Стриминг

vue-server-renderer поддерживает потоковый рендеринг из коробки, как для базового рендерера, так и для рендерера сборки. Всё, что вам нужно сделать, это использовать renderToStream вместо renderToString:

const stream = renderer.renderToStream(context)

Возвращаемое значение это обычный поток Node.js (opens new window):

let html = ''

stream.on('data', data => {
  html += data.toString()
})

stream.on('end', () => {
  console.log(html) // рендер завершён
})

stream.on('error', err => {
  // обработка ошибок...
})

Ограничения по использованию стриминга

В режиме рендеринга потока данные отдаются как можно быстрее пока рендерер проходит дерево виртуального DOM. Это означает, что мы можем получить раньше «первый кусок» и быстрее отправить его клиенту.

Тем не менее, когда первый блок данных был отправлен, дочерние компоненты могут ещё даже не быть созданы, и не будут вызваны хуки их жизненного цикла. Это означает, что если дочерние компоненты должны присоединять данные к контексту рендера в их хуках жизненного цикла, то эти данные ещё не будут доступны когда поток начнётся. Поскольку большая часть контекстной информации (например, информация о заголовочных тегах или о встроенном критическом CSS) должна появиться перед разметкой приложения, мы по существу должны дождаться завершения потока, прежде чем сможем начать использовать эти данные контекста.

Поэтому НЕ РЕКОМЕНДУЕТСЯ использовать режим потоковой передачи, если вы полагаетесь на данные контекста, заполняемые данными в хуках жизненного цикла компонентов.