tangweijie
5099f2e87e
- Vue 3 + TypeScript + Element Plus 前端界面 - Pinia 状态管理 - Vue Router 4 路由管理 - Axios HTTP 客户端 - MSW (Mock Service Worker) 开发环境模拟 - 账户管理界面 (列表、详情、三科目余额展示) - 交易管理界面 (列表、详情) - 对账管理界面 (三账校验) - 完善的 API 客户端封装 - Docker 容器化配置 - Nginx 配置用于生产环境
3.8 KiB
@vue/server-renderer
Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/server-renderer. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the vue/server-renderer deep import instead.
Basic API
renderToString
Signature
function renderToString(
input: App | VNode,
context?: SSRContext,
): Promise<string>
Usage
const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')
const app = createSSRApp({
data: () => ({ msg: 'hello' }),
template: `<div>{{ msg }}</div>`,
})
;(async () => {
const html = await renderToString(app)
console.log(html)
})()
Handling Teleports
If the rendered app contains teleports, the teleported content will not be part of the rendered string. Instead, they are exposed under the teleports property of the ssr context object:
const ctx = {}
const html = await renderToString(app, ctx)
console.log(ctx.teleports) // { '#teleported': 'teleported content' }
Streaming API
renderToNodeStream
Renders input as a Node.js Readable stream.
Signature
function renderToNodeStream(input: App | VNode, context?: SSRContext): Readable
Usage
// inside a Node.js http handler
renderToNodeStream(app).pipe(res)
Note: This method is not supported in the ESM build of @vue/server-renderer, which is decoupled from Node.js environments. Use pipeToNodeWritable instead.
pipeToNodeWritable
Render and pipe to an existing Node.js Writable stream instance.
Signature
function pipeToNodeWritable(
input: App | VNode,
context: SSRContext = {},
writable: Writable,
): void
Usage
// inside a Node.js http handler
pipeToNodeWritable(app, {}, res)
renderToWebStream
Renders input as a Web ReadableStream.
Signature
function renderToWebStream(
input: App | VNode,
context?: SSRContext,
): ReadableStream
Usage
// inside an environment with ReadableStream support
return new Response(renderToWebStream(app))
Note: in environments that do not expose ReadableStream constructor in the global scope, pipeToWebWritable should be used instead.
pipeToWebWritable
Render and pipe to an existing Web WritableStream instance.
Signature
function pipeToWebWritable(
input: App | VNode,
context: SSRContext = {},
writable: WritableStream,
): void
Usage
This is typically used in combination with TransformStream:
// TransformStream is available in environments such as CloudFlare workers.
// in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
const { readable, writable } = new TransformStream()
pipeToWebWritable(app, {}, writable)
return new Response(readable)
renderToSimpleStream
Renders input in streaming mode using a simple readable interface.
Signature
function renderToSimpleStream(
input: App | VNode,
context: SSRContext,
options: SimpleReadable,
): SimpleReadable
interface SimpleReadable {
push(content: string | null): void
destroy(err: any): void
}
Usage
let res = ''
renderToSimpleStream(
app,
{},
{
push(chunk) {
if (chunk === null) {
// done
console(`render complete: ${res}`)
} else {
res += chunk
}
},
destroy(err) {
// error encountered
},
},
)