伺服器端渲染 API ​

renderToString() ​

• 從 vue/server-renderer 匯出

• 型別

  ts

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

• 示例

  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 上下文 ​

  您可以選擇傳遞一個可選的上下文物件，該物件可以在渲染過程中記錄額外的資料，例如 訪問 Teleports 的內容

  js

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

  本頁面上大多數其他SSR API也可選地接受一個上下文物件。可以透過useSSRContext輔助函式在元件程式碼中訪問上下文物件。

• 另請參閱 指南 - 伺服器端渲染

renderToNodeStream() ​

將輸入渲染為Node.js 可讀流。

• 從 vue/server-renderer 匯出

• 型別

  ts

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

• 示例

  js

  // inside a Node.js http handler
  renderToNodeStream(app).pipe(res)

  注意

  此方法不支援在從Node.js環境解耦的vue/server-renderer的ESM構建中。請改用pipeToNodeWritable。

pipeToNodeWritable() ​

將渲染結果透過管道傳送到現有的Node.js 可寫流例項。

• 從 vue/server-renderer 匯出

• 型別

  ts

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

• 示例

  js

  // inside a Node.js http handler
  pipeToNodeWritable(app, {}, res)

renderToWebStream() ​

將輸入渲染為Web 可讀流。

• 從 vue/server-renderer 匯出

• 型別

  ts

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

• 示例

  js

  // inside an environment with ReadableStream support
  return new Response(renderToWebStream(app))

  注意

  在不暴露ReadableStream建構函式的全球作用域的環境中，應改用pipeToWebWritable。

pipeToWebWritable() ​

將渲染結果透過管道傳送到現有的Web 可寫流例項。

• 從 vue/server-renderer 匯出

• 型別

  ts

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

• 示例

  這通常與TransformStream一起使用。

  js

  // 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() ​

使用簡單的可讀介面以流模式渲染輸入。

• 從 vue/server-renderer 匯出

• 型別

  ts

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

• 示例

  js

  let res = ''
  
  renderToSimpleStream(
    app,
    {},
    {
      push(chunk) {
        if (chunk === null) {
          // done
          console(`render complete: ${res}`)
        } else {
          res += chunk
        }
      },
      destroy(err) {
        // error encountered
      }
    }
  )

useSSRContext() ​

這是一個執行時API，用於檢索傳遞給renderToString()或其他伺服器渲染API的上下文物件。

• 型別

  ts

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

• 示例

  檢索到的上下文可以用來附加渲染最終HTML所需的附加資訊（例如，head元資料）。

  vue

  <script setup>
  import { useSSRContext } from 'vue'
  
  // make sure to only call it during SSR
  // https://vitejs.dev/guide/ssr.html#conditional-logic
  if (import.meta.env.SSR) {
    const ctx = useSSRContext()
    // ...attach properties to the context
  }
  </script>

data-allow-mismatch ​

一個特殊屬性，可以用來抑制資料同步不一致警告。

• 示例

  html

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

  值可以限制允許的不一致型別。允許的值有

  • text
  • children（僅允許直接子項的不一致）
  • class
  • style
  • attribute

  如果沒有提供值，將允許所有型別的不一致。