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: 'привет' }), 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': 'контент телепорта' }
Большинство других SSR API, представленных на этой странице, также опционально принимают объект контекста. Доступ к объекту контекста можно получить в коде компонента с помощью помощника useSSRContext.
renderToNodeStream()
Выводит входные данные в виде Node.js Readable stream.
Экспортируется из
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 Writable stream.
Экспортируется из
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 workers. // в Node.js TransformStream должен быть явно импортирован из 'stream/web' const { readable, writable } = new TransformStream() pipeToWebWritable(app, {}, writable) return new Response(readable)
renderToSimpleStream()
Осуществляет отрисовку входных данных в потоковом режиме с использованием простого readable интерфейса.
Экспортируется из
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(`отрисовка завершена: ${res}`) } else { res += chunk } }, destroy(err) { // возникла ошибка } } )
useSSRContext()
Runtime API, используемый для получения объекта контекста, передаваемого в renderToString()
или другие серверные API отрисовки.
Тип
tsfunction 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.