서버 사이드 렌더링 API
renderToString()
vue/server-renderer
에서 내보냄타입
tsfunction renderToString( input: App | VNode, context?: SSRContext ): Promise<string>
예시
jsimport { 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 컨텍스트
선택적으로 컨텍스트 객체를 전달할 수 있으며, 렌더링 중에 추가 데이터를 기록하는 데 사용할 수 있습니다. 예를 들어 Teleport의 내용 접근에 사용할 수 있습니다:
jsconst ctx = {} const html = await renderToString(app, ctx) console.log(ctx.teleports) // { '#teleported': 'teleported content' }
이 페이지의 대부분의 다른 SSR API도 선택적으로 컨텍스트 객체를 받을 수 있습니다. 컨텍스트 객체는 컴포넌트 코드에서 useSSRContext 헬퍼를 통해 접근할 수 있습니다.
관련 문서 가이드 - 서버 사이드 렌더링
renderToNodeStream()
입력을 Node.js Readable 스트림으로 렌더링합니다.
vue/server-renderer
에서 내보냄타입
tsfunction renderToNodeStream( input: App | VNode, context?: SSRContext ): Readable
예시
js// Node.js http 핸들러 내부 renderToNodeStream(app).pipe(res)
참고
이 메서드는 Node.js 환경과 분리된
vue/server-renderer
의 ESM 빌드에서는 지원되지 않습니다. 대신pipeToNodeWritable
을 사용하세요.
pipeToNodeWritable()
렌더링 후 기존 Node.js Writable 스트림 인스턴스에 파이프합니다.
vue/server-renderer
에서 내보냄타입
tsfunction pipeToNodeWritable( input: App | VNode, context: SSRContext = {}, writable: Writable ): void
예시
js// Node.js http 핸들러 내부 pipeToNodeWritable(app, {}, res)
renderToWebStream()
입력을 Web ReadableStream으로 렌더링합니다.
vue/server-renderer
에서 내보냄타입
tsfunction renderToWebStream( input: App | VNode, context?: SSRContext ): ReadableStream
예시
js// ReadableStream을 지원하는 환경에서 return new Response(renderToWebStream(app))
참고
전역 범위에
ReadableStream
생성자가 노출되지 않은 환경에서는pipeToWebWritable()
을 대신 사용해야 합니다.
pipeToWebWritable()
렌더링 후 기존 Web WritableStream 인스턴스에 파이프합니다.
vue/server-renderer
에서 내보냄타입
tsfunction pipeToWebWritable( input: App | VNode, context: SSRContext = {}, writable: WritableStream ): void
예시
일반적으로
TransformStream
과 함께 사용됩니다:js// TransformStream은 CloudFlare workers와 같은 환경에서 사용 가능합니다. // Node.js에서는 TransformStream을 'stream/web'에서 명시적으로 import해야 합니다. const { readable, writable } = new TransformStream() pipeToWebWritable(app, {}, writable) return new Response(readable)
renderToSimpleStream()
간단한 읽기 인터페이스를 사용하여 스트리밍 모드로 입력을 렌더링합니다.
vue/server-renderer
에서 내보냄타입
tsfunction renderToSimpleStream( input: App | VNode, context: SSRContext, options: SimpleReadable ): SimpleReadable interface SimpleReadable { push(content: string | null): void destroy(err: any): void }
예시
jslet res = '' renderToSimpleStream( app, {}, { push(chunk) { if (chunk === null) { // 완료 console(`렌더링 완료: ${res}`) } else { res += chunk } }, destroy(err) { // 에러 발생 } } )
useSSRContext()
renderToString()
또는 기타 서버 렌더 API에 전달된 컨텍스트 객체를 가져오는 런타임 API입니다.
타입
tsfunction useSSRContext<T = Record<string, any>>(): T | undefined
예시
가져온 컨텍스트는 최종 HTML 렌더링에 필요한 정보(예: head 메타데이터)를 첨부하는 데 사용할 수 있습니다.
vue<script setup> import { useSSRContext } from 'vue' // 반드시 SSR 중에만 호출해야 합니다. // https://vitejs.dev/guide/ssr.html#conditional-logic 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
값을 제공하지 않으면 모든 유형의 불일치가 허용됩니다.