1 | # @vue/server-renderer
|
---|
2 |
|
---|
3 | **Note: as of 3.2.13+, this package is included as a dependency of the main `vue` package and can be accessed as `vue/server-renderer`. This means you no longer need to explicitly install this package and ensure its version match that of `vue`'s. Just use the `vue/server-renderer` deep import instead.**
|
---|
4 |
|
---|
5 | ## Basic API
|
---|
6 |
|
---|
7 | ### `renderToString`
|
---|
8 |
|
---|
9 | **Signature**
|
---|
10 |
|
---|
11 | ```ts
|
---|
12 | function renderToString(
|
---|
13 | input: App | VNode,
|
---|
14 | context?: SSRContext,
|
---|
15 | ): Promise<string>
|
---|
16 | ```
|
---|
17 |
|
---|
18 | **Usage**
|
---|
19 |
|
---|
20 | ```js
|
---|
21 | const { createSSRApp } = require('vue')
|
---|
22 | const { renderToString } = require('@vue/server-renderer')
|
---|
23 |
|
---|
24 | const app = createSSRApp({
|
---|
25 | data: () => ({ msg: 'hello' }),
|
---|
26 | template: `<div>{{ msg }}</div>`,
|
---|
27 | })
|
---|
28 |
|
---|
29 | ;(async () => {
|
---|
30 | const html = await renderToString(app)
|
---|
31 | console.log(html)
|
---|
32 | })()
|
---|
33 | ```
|
---|
34 |
|
---|
35 | ### Handling Teleports
|
---|
36 |
|
---|
37 | If the rendered app contains teleports, the teleported content will not be part of the rendered string. Instead, they are exposed under the `teleports` property of the ssr context object:
|
---|
38 |
|
---|
39 | ```js
|
---|
40 | const ctx = {}
|
---|
41 | const html = await renderToString(app, ctx)
|
---|
42 |
|
---|
43 | console.log(ctx.teleports) // { '#teleported': 'teleported content' }
|
---|
44 | ```
|
---|
45 |
|
---|
46 | ## Streaming API
|
---|
47 |
|
---|
48 | ### `renderToNodeStream`
|
---|
49 |
|
---|
50 | Renders input as a [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_class_stream_readable).
|
---|
51 |
|
---|
52 | **Signature**
|
---|
53 |
|
---|
54 | ```ts
|
---|
55 | function renderToNodeStream(input: App | VNode, context?: SSRContext): Readable
|
---|
56 | ```
|
---|
57 |
|
---|
58 | **Usage**
|
---|
59 |
|
---|
60 | ```js
|
---|
61 | // inside a Node.js http handler
|
---|
62 | renderToNodeStream(app).pipe(res)
|
---|
63 | ```
|
---|
64 |
|
---|
65 | **Note:** This method is not supported in the ESM build of `@vue/server-renderer`, which is decoupled from Node.js environments. Use `pipeToNodeWritable` instead.
|
---|
66 |
|
---|
67 | ### `pipeToNodeWritable`
|
---|
68 |
|
---|
69 | Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) instance.
|
---|
70 |
|
---|
71 | **Signature**
|
---|
72 |
|
---|
73 | ```ts
|
---|
74 | function pipeToNodeWritable(
|
---|
75 | input: App | VNode,
|
---|
76 | context: SSRContext = {},
|
---|
77 | writable: Writable,
|
---|
78 | ): void
|
---|
79 | ```
|
---|
80 |
|
---|
81 | **Usage**
|
---|
82 |
|
---|
83 | ```js
|
---|
84 | // inside a Node.js http handler
|
---|
85 | pipeToNodeWritable(app, {}, res)
|
---|
86 | ```
|
---|
87 |
|
---|
88 | ### `renderToWebStream`
|
---|
89 |
|
---|
90 | Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
|
---|
91 |
|
---|
92 | **Signature**
|
---|
93 |
|
---|
94 | ```ts
|
---|
95 | function renderToWebStream(
|
---|
96 | input: App | VNode,
|
---|
97 | context?: SSRContext,
|
---|
98 | ): ReadableStream
|
---|
99 | ```
|
---|
100 |
|
---|
101 | **Usage**
|
---|
102 |
|
---|
103 | ```js
|
---|
104 | // inside an environment with ReadableStream support
|
---|
105 | return new Response(renderToWebStream(app))
|
---|
106 | ```
|
---|
107 |
|
---|
108 | **Note:** in environments that do not expose `ReadableStream` constructor in the global scope, `pipeToWebWritable` should be used instead.
|
---|
109 |
|
---|
110 | ### `pipeToWebWritable`
|
---|
111 |
|
---|
112 | Render and pipe to an existing [Web WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) instance.
|
---|
113 |
|
---|
114 | **Signature**
|
---|
115 |
|
---|
116 | ```ts
|
---|
117 | function pipeToWebWritable(
|
---|
118 | input: App | VNode,
|
---|
119 | context: SSRContext = {},
|
---|
120 | writable: WritableStream,
|
---|
121 | ): void
|
---|
122 | ```
|
---|
123 |
|
---|
124 | **Usage**
|
---|
125 |
|
---|
126 | This is typically used in combination with [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream):
|
---|
127 |
|
---|
128 | ```js
|
---|
129 | // TransformStream is available in environments such as CloudFlare workers.
|
---|
130 | // in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
|
---|
131 | const { readable, writable } = new TransformStream()
|
---|
132 | pipeToWebWritable(app, {}, writable)
|
---|
133 |
|
---|
134 | return new Response(readable)
|
---|
135 | ```
|
---|
136 |
|
---|
137 | ### `renderToSimpleStream`
|
---|
138 |
|
---|
139 | Renders input in streaming mode using a simple readable interface.
|
---|
140 |
|
---|
141 | **Signature**
|
---|
142 |
|
---|
143 | ```ts
|
---|
144 | function renderToSimpleStream(
|
---|
145 | input: App | VNode,
|
---|
146 | context: SSRContext,
|
---|
147 | options: SimpleReadable,
|
---|
148 | ): SimpleReadable
|
---|
149 |
|
---|
150 | interface SimpleReadable {
|
---|
151 | push(content: string | null): void
|
---|
152 | destroy(err: any): void
|
---|
153 | }
|
---|
154 | ```
|
---|
155 |
|
---|
156 | **Usage**
|
---|
157 |
|
---|
158 | ```js
|
---|
159 | let res = ''
|
---|
160 |
|
---|
161 | renderToSimpleStream(
|
---|
162 | app,
|
---|
163 | {},
|
---|
164 | {
|
---|
165 | push(chunk) {
|
---|
166 | if (chunk === null) {
|
---|
167 | // done
|
---|
168 | console(`render complete: ${res}`)
|
---|
169 | } else {
|
---|
170 | res += chunk
|
---|
171 | }
|
---|
172 | },
|
---|
173 | destroy(err) {
|
---|
174 | // error encountered
|
---|
175 | },
|
---|
176 | },
|
---|
177 | )
|
---|
178 | ```
|
---|