Vue.js

外観

目次

サーバーサイドレンダリング 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 コンテキスト ​

    省略可能なコンテキストオブジェクトを渡すと、レンダリング中に追加データを記録するために使用できます。例えば、テレポートのコンテンツにアクセスするには:

    js
    const ctx = {}
const html = await renderToString(app, ctx)

console.log(ctx.teleports) // { '#teleported': 'teleported content' }

    このページにある他のほとんどの SSR API も、省略可能なコンテキストオブジェクトを受け付けます。useSSRContext ヘルパーを使うことで、コンポーネントコード内でコンテキストオブジェクトにアクセスできます。

  • 参照 ガイド - サーバーサイドレンダリング

renderToNodeStream() ​

入力を Node.js Readable stream としてレンダリングします。

  • vue/server-renderer からエクスポート

  • 型

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

  • 例

    js
    // Node.js http handler の内部
renderToNodeStream(app).pipe(res)

    注意

    このメソッドは、Node.js 環境から切り離されている vue/server-renderer の ESM ビルドではサポートされていません。代わりに pipeToNodeWritable を使用してください。

pipeToNodeWritable() ​

既存の Node.js Writable stream インスタンスにパイプしてレンダリングします。

  • vue/server-renderer からエクスポート

  • 型

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

  • 例

    js
    // Node.js http handler の内部
pipeToNodeWritable(app, {}, res)

renderToWebStream() ​

入力を Web ReadableStream としてレンダリングします。

  • vue/server-renderer からエクスポート

  • 型

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

  • 例

    js
    // ReadableStream がサポートされている環境の内部
return new Response(renderToWebStream(app))

    注意

    グローバルスコープで ReadableStream コンストラクターを公開しない環境では、代わりに pipeToWebWritable() を使用する必要があります。

pipeToWebWritable() ​

既存の Web WritableStream インスタンスにパイプしてレンダリングします。

  • vue/server-renderer からエクスポート

  • 型

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

  • 例

    これは通常、TransformStream と組み合わせて使用されます:

    js
    // TransformStream は、CloudFlare のワーカーなどの環境で利用できます。
// Node.js では、'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) {
        // 完了
        console(`render complete: ${res}`)
      } else {
        res += chunk
      }
    },
    destroy(err) {
      // エラーが発生
    }
  }
)

useSSRContext() ​

renderToString() やその他のサーバー レンダリング API に渡されるコンテキストオブジェクトを取得するために使用するランタイム API。

  • 型

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

  • 例

    取得したコンテキストを使用して、最終的な HTML をレンダリングするために必要な情報（ヘッドメタデータなど）を添付できます。

    vue
    <script setup>
import { useSSRContext } from 'vue'

// SSR の時だけ呼び出すようにする
// https://ja.vitejs.dev/guide/ssr.html#条件付きロジック
if (import.meta.env.SSR) {
  const ctx = useSSRContext()
  // ...コンテキストにプロパティを付加する
}
</script>

data-allow-mismatch ​

ハイドレーション・ミスマッチ の警告を抑制するために使用できる特別な属性です。

  • 例

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

    この値で特定のタイプのミスマッチを許可することができます。指定できる値は以下の通りです:

    • text
    • children（直下の子要素に対してのみミスマッチを許可します）
    • class
    • style
    • attribute

    値を指定しない場合、すべてのタイプのミスマッチが許可されます。

このページを GitHub で編集