Passer au contenu

API du rendu côté serveur

renderToString()

  • Exporté depuis vue/server-renderer

  • Type :

    ts
    function renderToString(
      input: App | VNode,
      context?: SSRContext
    ): Promise<string>
  • Exemple

    js
    import { 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)
    })()

    Contexte SSR

    Vous pouvez passer un objet facultatif représentant le contexte, et pouvant être utilisé pour enregistrer des données supplémentaires pendant le rendu, par exemple pour accéder au contenu des Teleports :

    js
    const ctx = {}
    const html = await renderToString(app, ctx)
    
    console.log(ctx.teleports) // { '#teleported': 'teleported content' }

    La plupart des autres API de SSR présentées sur cette page acceptent également de manière facultative un objet de contexte. L'objet de contexte est accessible dans le code du composant via l'utilitaire useSSRContext.

  • Voir aussi Guide - Rendu côté serveur

renderToNodeStream()

Effectue le rendu de l'entrée comme un Readable Stream de Node.js.

  • Exporté depuis vue/server-renderer

  • Type :

    ts
    function renderToNodeStream(
      input: App | VNode,
      context?: SSRContext
    ): Readable
  • Exemple

    js
    // à l'intérieur d'un gestionnaire http Node.js
    renderToNodeStream(app).pipe(res)

    Remarque

    Cette méthode n'est pas supportée dans le build ESM de vue/server-renderer, qui est n'est pas couplé aux environnements Node.js. Utilisez plutôt pipeToNodeWritable.

pipeToNodeWritable()

Effectue le rendu et le transfert vers une instance existante d'un Writable Stream de Node.js.

  • Exporté depuis vue/server-renderer

  • Type :

    ts
    function pipeToNodeWritable(
      input: App | VNode,
      context: SSRContext = {},
      writable: Writable
    ): void
  • Exemple

    js
    // à l'intérieur d'un gestionnaire http Node.js
    pipeToNodeWritable(app, {}, res)

renderToWebStream()

Effectue le rendu de l'entrée sous forme d'un Readable Stream web.

  • Exporté depuis vue/server-renderer

  • Type :

    ts
    function renderToWebStream(
      input: App | VNode,
      context?: SSRContext
    ): ReadableStream
  • Exemple

    js
    // dans un environnement prenant en charge _ReadableStream_
    return new Response(renderToWebStream(app))

    Remarque

    Dans les environnements n'exposant pas le constructeur ReadableStream dans la portée globale, pipeToWebWritable() doit être utilisée à la place.

pipeToWebWritable()

Effectue le rendu et le transfert à une instance existante d'un Writable Stream web.

  • Exporté depuis vue/server-renderer

  • Type :

    ts
    function pipeToWebWritable(
      input: App | VNode,
      context: SSRContext = {},
      writable: WritableStream
    ): void
  • Exemple

    Cette fonction est généralement utilisée en combinaison avec TransformStream :

    js
    // TransformStream est disponible dans des environnements tels que les espaces de travail de CloudFlare.
    // dans Node.js, TransformStream doit être explicitement importé à partir de 'stream/web'
    const { readable, writable } = new TransformStream()
    pipeToWebWritable(app, {}, writable)
    
    return new Response(readable)

renderToSimpleStream()

Effectue le rendu de l'entrée en mode streaming en utilisant une simple interface lisible.

  • Exporté depuis vue/server-renderer

  • Type :

    ts
    function renderToSimpleStream(
      input: App | VNode,
      context: SSRContext,
      options: SimpleReadable
    ): SimpleReadable
    
    interface SimpleReadable {
      push(content: string | null): void
      destroy(err: any): void
    }
  • Exemple

    js
    let res = ''
    
    renderToSimpleStream(
      app,
      {},
      {
        push(chunk) {
          if (chunk === null) {
            // terminé
            console(`render complete: ${res}`)
          } else {
            res += chunk
          }
        },
        destroy(err) {
          // erreur rencontrée
        }
      }
    )

useSSRContext()

Une API d'exécution utilisée pour récupérer l'objet de contexte transmis à renderToString() ou à d'autres API de rendu serveur.

  • Type :

    ts
    function useSSRContext<T = Record<string, any>>(): T | undefined
  • Exemple

    Le contexte récupéré peut être utilisé pour joindre les informations nécessaires au rendu du HTML final (par exemple, les métadonnées de l'en-tête).

    vue
    <script setup>
    import { useSSRContext } from 'vue'
    
    // ne l'appelez que lors du rendu côté serveur
    // https://vitejs.dev/guide/ssr.html#conditional-logic
    if (import.meta.env.SSR) {
      const ctx = useSSRContext()
      // ...attache des propriétés au contexte
    }
    </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 du rendu côté serveura chargé