Skip to content

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: 'привет' }),
      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': 'контент телепорта' }

    Большинство других SSR API, представленных на этой странице, также опционально принимают объект контекста. Доступ к объекту контекста можно получить в коде компонента с помощью помощника useSSRContext.

  • См. также Руководство — Отрисовка на стороне сервера

renderToNodeStream()

Выводит входные данные в виде Node.js Readable stream.

  • Экспортируется из 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 Writable stream.

  • Экспортируется из 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 workers.
    // в Node.js TransformStream должен быть явно импортирован из 'stream/web'
    const { readable, writable } = new TransformStream()
    pipeToWebWritable(app, {}, writable)
    
    return new Response(readable)

renderToSimpleStream()

Осуществляет отрисовку входных данных в потоковом режиме с использованием простого readable интерфейса.

  • Экспортируется из 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(`отрисовка завершена: ${res}`)
          } else {
            res += chunk
          }
        },
        destroy(err) {
          // возникла ошибка
        }
      }
    )

useSSRContext()

Runtime API, используемый для получения объекта контекста, передаваемого в renderToString() или другие серверные API отрисовки.

  • Тип

    ts
    function useSSRContext<T = Record<string, any>>(): T | undefined
  • Пример

    Извлеченный контекст может быть использован для присоединения информации, необходимой для рендеринга конечного HTML (например, метаданных head).

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

data-allow-mismatch

A special attribute that can be used to suppress hydration mismatch warnings.

  • Example

    html
    <div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>

    The value can limit the allowed mismatch to a specific type. Allowed values are:

    • text
    • children (only allows mismatch for direct children)
    • class
    • style
    • attribute

    If no value is provided, all types of mismatches will be allowed.

API отрисовки на стороне сервераУже загружено