API рендерингу на стороні сервера ​

renderToString() ​

• Експортовано з vue/server-renderer

• Тип

  ts

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

• Приклад

  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 ​

  Ви можете передати необов'язковий об'єкт контексту, який можна використовувати для запису додаткових даних під час візуалізації, наприклад доступ до вмісту телепортів:

  js

  const ctx = {}
  const html = await renderToString(app, ctx)
  
  console.log(ctx.teleports) // { '#teleported': 'телепортований вміст' }

  Більшість інших API SSR на цій сторінці також опціонально приймають контекстний об'єкт. Доступ до об'єкта контексту можна отримати в коді компонента за допомогою помічника useSSRContext.

• Дивіться також: Посібник - Рендеринг на стороні сервера

renderToNodeStream() ​

Рендеринг вхідних даних як читабельного потоку Node.js.

• Експортовано з vue/server-renderer

• Тип

  ts

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

• Приклад

  js

  // всередині обробника http Node.js
  renderToNodeStream(app).pipe(res)

  Примітка

  Цей метод не підтримується в збірці ESM vue/server-renderer, яка відокремлена від середовища Node.js. Натомість використовуйте pipeToNodeWritable.

pipeToNodeWritable() ​

Рендеринг та передавання в екземпляр потоку Node.js з можливістю запису.

• Експортовано з vue/server-renderer

• Тип

  ts

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

• Приклад

  js

  // всередині обробника http Node.js
  pipeToNodeWritable(app, {}, res)

renderToWebStream() ​

Рендеринг введення як Web ReadableStream.

• Експортовано з vue/server-renderer

• Тип

  ts

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

• Приклад

  js

  // всередині середовища з підтримкою ReadableStream
  return new Response(renderToWebStream(app))

  Примітка

  У середовищах, які не надають конструктора ReadableStream у глобальній області видимості, замість нього слід використовувати pipeToWebWritable().

pipeToWebWritable() ​

Рендерить та передавання в існуючий екземпляр Web WritableStream.

• Експортовано з vue/server-renderer

• Тип

  ts

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

• Приклад

  Це зазвичай використовується в поєднанні з TransformStream:

  js

  // TransformStream доступний у таких середовищах, як робочі середовища CloudFlare.
  // у Node.js TransformStream потрібно явно імпортувати з 'stream/web'
  const { readable, writable } = new TransformStream()
  pipeToWebWritable(app, {}, writable)
  
  return new Response(readable)

renderToSimpleStream() ​

Рендеринг вхідних даних в потоковому режимі за допомогою простого читабельного інтерфейсу.

• Експортовано з vue/server-renderer

• Тип

  ts

  function renderToSimpleStream(
    input: App | VNode,
    context: SSRContext,
    options: SimpleReadable
  ): SimpleReadable
  
  interface SimpleReadable {
    push(content: string | null): void
    destroy(err: any): void
  }

• Приклад

  js

  let res = ''
  
  renderToSimpleStream(
    app,
    {},
    {
      push(chunk) {
        if (chunk === null) {
          // готово
          console(`render complete: ${res}`)
        } else {
          res += chunk
        }
      },
      destroy(err) {
        // сталася помилка
      }
    }
  )

useSSRContext() ​

API часу виконання, який використовується для отримання об'єкта контексту, переданого до renderToString() або іншого API відтворення сервера.

• Тип

  ts

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

• Приклад

  Отриманий контекст можна використовувати для додавання інформації, необхідної для відтворення остаточного HTML (наприклад, метаданих заголовка).

  vue

  <script setup>
  import { useSSRContext } from 'vue'
  
  // переконайтеся, що це викликається лише під час SSR
  // https://vitejs.dev/guide/ssr.html#conditional-logic
  if (import.meta.env.SSR) {
    const ctx = useSSRContext()
    // ...додати властивості до контексту
  }
  </script>