Skip to content

현재 이 문서는 번역 작업이 진행중입니다

Server-Side Rendering API

renderToString()

  • Exported from vue/server-renderer

  • 타입:

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

    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

    You can pass an optional context object, which can be used to record additional data during the render, for example accessing content of Teleports:

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

    Most other SSR APIs on this page also optionally accept a context object. The context object can be accessed in component code via the useSSRContext helper.

  • 참고: 가이드 - Server-Side Rendering

renderToNodeStream()

Renders input as a Node.js Readable stream.

  • Exported from vue/server-renderer

  • 타입:

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

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

    Note

    This method is not supported in the ESM build of vue/server-renderer, which is decoupled from Node.js environments. Use pipeToNodeWritable instead.

pipeToNodeWritable()

Render and pipe to an existing Node.js Writable stream instance.

  • Exported from vue/server-renderer

  • 타입:

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

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

renderToWebStream()

Renders input as a Web ReadableStream.

  • Exported from vue/server-renderer

  • 타입:

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

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

    Note

    In environments that do not expose ReadableStream constructor in the global scope, pipeToWebWritable() should be used instead.

pipeToWebWritable()

Render and pipe to an existing Web WritableStream instance.

  • Exported from vue/server-renderer

  • 타입:

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

    This is typically used in combination with TransformStream:

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

Renders input in streaming mode using a simple readable interface.

  • Exported from vue/server-renderer

  • 타입:

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

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

useSSRContext()

A runtime API used to retrieve the context object passed to renderToString() or other server render APIs.

  • 타입:

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

    The retrieved context can be used to attach information that is needed for rendering the final HTML (e.g. head metadata).

    <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>
    
Server-Side Rendering API has loaded