Rendering API lato server
renderToString()
Esportato da
vue/server-renderer
Tipo
tsfunction renderToString( input: App | VNode, context?: SSRContext ): Promise<string>
Esempio
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) })()
Context del SSR
Puoi passare un oggetto context opzionale, che può essere utilizzato per registrare dati aggiuntivi durante il rendering, ad esempio l'accesso ai contenuti di Teleports:
jsconst ctx = {} const html = await renderToString(app, ctx) console.log(ctx.teleports) // { '#teleported': 'contenuto teletrasportato' }
La maggior parte delle altre API SSR in questa pagina accettano anche opzionalmente un oggetto contesto. L'oggetto contesto può essere accessibile nel codice del componente tramite l'helper useSSRContext.
Vedi anche Guida - Server-Side Rendering
renderToNodeStream()
Renderizza l'input come uno stream leggibile di Node.js.
Esportato da
vue/server-renderer
Tipo
tsfunction renderToNodeStream( input: App | VNode, context?: SSRContext ): Readable
Esempio
js// all'interno di un gestore http di Node.js renderToNodeStream(app).pipe(res)
Note
Questo metodo non è supportato nella versione ESM di
vue/server-renderer
, che è disaccoppiata dagli ambienti Node.js. Usa invecepipeToNodeWritable
.
pipeToNodeWritable()
Renderizza e indirizza in un'istanza esistente di stream scrivibile Node.js (Node.js Writable stream) instance.
Esportato da
vue/server-renderer
Tipo
tsfunction pipeToNodeWritable( input: App | VNode, context: SSRContext = {}, writable: Writable ): void
Esempio
js// all'interno di un gestore http di Node.js pipeToNodeWritable(app, {}, res)
renderToWebStream()
Renderizza l'input come uno Web ReadableStream.
Esportato da
vue/server-renderer
Tipo
tsfunction renderToWebStream( input: App | VNode, context?: SSRContext ): ReadableStream
Esempio
js// all'interno di un ambiente con supporto per ReadableStream return new Response(renderToWebStream(app))
Note
Negli ambienti che non espongono il costruttore
ReadableStream
nello scope globale, dovrebbe essere usatopipeToWebWritable()
al suo posto.
pipeToWebWritable()
Renderizza e indirizza in un'istanza esistente di Web WritableStream.
Esportato da
vue/server-renderer
Tipo
tsfunction pipeToWebWritable( input: App | VNode, context: SSRContext = {}, writable: WritableStream ): void
Esempio
Questo è tipicamente usato in combinazione con
TransformStream
:js// TransformStream è disponibile in ambienti come i workers di CloudFlare. // In Node.js, TransformStream deve essere esplicitamente importato da 'stream/web' const { readable, writable } = new TransformStream() pipeToWebWritable(app, {}, writable) return new Response(readable)
renderToSimpleStream()
Renderizza l'input in modalità streaming utilizzando un'interfaccia leggibile semplice.
Esportato da
vue/server-renderer
Tipo
tsfunction renderToSimpleStream( input: App | VNode, context: SSRContext, options: SimpleReadable ): SimpleReadable interface SimpleReadable { push(content: string | null): void destroy(err: any): void }
Esempio
jslet res = '' renderToSimpleStream( app, {}, { push(chunk) { if (chunk === null) { // completato console(`render complete: ${res}`) } else { res += chunk } }, destroy(err) { // riscontrato errore } } )
useSSRContext()
Un'API di runtime utilizzata per recuperare l'oggetto di contesto passato a renderToString()
o ad altre API di rendering lato server..
Tipo
tsfunction useSSRContext<T = Record<string, any>>(): T | undefined
Esempio
L'oggetto di contesto recuperato può essere utilizzato per allegare informazioni necessarie per il rendering dell'HTML finale (ad esempio, metadati dell'head).
vue<script setup> import { useSSRContext } from 'vue' // assicurati di chiamarlo solo durante l'SSR // https://vitejs.dev/guide/ssr.html#conditional-logic if (import.meta.env.SSR) { const ctx = useSSRContext() // ...allega proprietà al contesto } </script>