API рендерингу на стороні сервера
renderToString()
Експортовано з
vue/server-renderer
Тип
tsfunction renderToString( input: App | VNode, context?: SSRContext ): Promise<string>
Приклад
jsimport { 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
Ви можете передати необов'язковий об'єкт контексту, який можна використовувати для запису додаткових даних під час візуалізації, наприклад доступ до вмісту телепортів:
jsconst ctx = {} const html = await renderToString(app, ctx) console.log(ctx.teleports) // { '#teleported': 'телепортований вміст' }
Більшість інших API SSR на цій сторінці також опціонально приймають контекстний об'єкт. Доступ до об'єкта контексту можна отримати в коді компонента за допомогою помічника useSSRContext.
Дивіться також: Посібник - Рендеринг на стороні сервера
renderToNodeStream()
Рендеринг вхідних даних як читабельного потоку Node.js.
Експортовано з
vue/server-renderer
Тип
tsfunction 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
Тип
tsfunction pipeToNodeWritable( input: App | VNode, context: SSRContext = {}, writable: Writable ): void
Приклад
js// всередині обробника http Node.js pipeToNodeWritable(app, {}, res)
renderToWebStream()
Рендеринг введення як Web ReadableStream.
Експортовано з
vue/server-renderer
Тип
tsfunction renderToWebStream( input: App | VNode, context?: SSRContext ): ReadableStream
Приклад
js// всередині середовища з підтримкою ReadableStream return new Response(renderToWebStream(app))
Примітка
У середовищах, які не надають конструктора
ReadableStream
у глобальній області видимості, замість нього слід використовуватиpipeToWebWritable()
.
pipeToWebWritable()
Рендерить та передавання в існуючий екземпляр Web WritableStream.
Експортовано з
vue/server-renderer
Тип
tsfunction 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
Тип
tsfunction renderToSimpleStream( input: App | VNode, context: SSRContext, options: SimpleReadable ): SimpleReadable interface SimpleReadable { push(content: string | null): void destroy(err: any): void }
Приклад
jslet res = '' renderToSimpleStream( app, {}, { push(chunk) { if (chunk === null) { // готово console(`render complete: ${res}`) } else { res += chunk } }, destroy(err) { // сталася помилка } } )
useSSRContext()
API часу виконання, який використовується для отримання об'єкта контексту, переданого до renderToString()
або іншого API відтворення сервера.
Тип
tsfunction 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>