Server-Side Rendering API ​

renderToString() ​

• Eksportowano z vue/server-renderer

• Typ

  ts

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

• Przykład

  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)
  })()

  SSR Context ​

  Możesz przekazać opcjonalny obiekt kontekstu, który może zostać użyty do rejestrowania dodatkowych danych podczas renderowania, na przykład dostęp do zawartości Teleportów:

  js

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

  Większość innych interfejsów API SSR na tej stronie opcjonalnie akceptuje również obiekt kontekstu. Dostęp do obiektu kontekstu jest możliwy w kodzie komponentu za pomocą pomocnika useSSRContext.

• Zobacz także Przewodnik - Renderowanie po stronie serwera

renderToNodeStream() ​

Renderuje dane wejściowe jako Node.js Readable stream.

• Eksportowano z vue/server-renderer

• Typ

  ts

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

• Example

  js

  // wewnątrz obsługi http Node.js
  renderToNodeStream(app).pipe(res)

  Note

  Ta metoda nie jest obsługiwana w kompilacji ESM vue/server-renderer, która jest oddzielona od środowisk Node.js. Zamiast tego użyj pipeToNodeWritable.

pipeToNodeWritable() ​

Renderuj i przekieruj do istniejącej instancji strumienia Node.js Writable.

• Eksportowano z vue/server-renderer

• Typ

  ts

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

• Przykład

  js

  // wewnątrz obsługi http Node.js
  pipeToNodeWritable(app, {}, res)

renderToWebStream() ​

Renderuje dane wejściowe jako Web ReadableStream.

• Eksportowano z vue/server-renderer

• Typ

  ts

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

• Example

  js

  // w środowisku obsługującym ReadableStream
  return new Response(renderToWebStream(app))

  Notatka

  W środowiskach, które nie udostępniają konstruktora ReadableStream w zakresie globalnym, należy zamiast tego użyć pipeToWebWritable().

pipeToWebWritable() ​

Renderuj i przekieruj do istniejącej instancji Web WritableStream.

• Eksportowano z vue/server-renderer

• Typ

  ts

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

• Przykład

  Zwykle jest używany w połączeniu z TransformStream:

  js

  // TransformStream jest dostępny w środowiskach takich jak pracownicy CloudFlare.
  // w Node.js TransformStream musi być jawnie importowany z 'stream/web'
  const { readable, writable } = new TransformStream()
  pipeToWebWritable(app, {}, writable)
  
  return new Response(readable)

renderToSimpleStream() ​

Renderuje dane wejściowe w trybie strumieniowym za pomocą prostego, czytelnego interfejsu.

• Eksportowano z vue/server-renderer

• Typ

  ts

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

• Example

  js

  let res = ''
  
  renderToSimpleStream(
    app,
    {},
    {
      push(chunk) {
        if (chunk === null) {
          // gotowe
          console(`render complete: ${res}`)
        } else {
          res += chunk
        }
      },
      destroy(err) {
        // napotkano błąd
      }
    }
  )

useSSRContext() ​

Interfejs API środowiska wykonawczego używany do pobierania obiektu kontekstu przekazanego do renderToString() lub innych interfejsów API renderowania serwera.

• Typ

  ts

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

• Przykład

  Pobrany kontekst można wykorzystać do dołączenia informacji potrzebnych do renderowania ostatecznego kodu HTML (np. metadane nagłówka).

  vue

  <script setup>
  import { useSSRContext } from 'vue'
  
  // pamiętaj, aby wywołać go tylko podczas SSR
  // https://vitejs.dev/guide/ssr.html#conditional-logic
  if (import.meta.env.SSR) {
    const ctx = useSSRContext()
    // ...dołącz właściwości do kontekstu
  }
  </script>

data-allow-mismatch ​

Atrybut, który może być użyty by pominąć ostrzeżenia o niezgodności hydratacji.

• Przykład

  html

  <div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>

  Wartość atrybutu może ograniczyć działanie jedynie do konkretnego typu. Dozwolone wartości to:

  • text
  • children (pozwala na nizgodności tylko dla bezpośrednich dzieci)
  • class
  • style
  • attribute

  Gdy nie jest dostarczona wartość, wszystkie typy niezgodności będą dozwolone.