You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

178 lines
3.8 KiB

1 month ago
  1. # @vue/server-renderer
  2. **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.**
  3. ## Basic API
  4. ### `renderToString`
  5. **Signature**
  6. ```ts
  7. function renderToString(
  8. input: App | VNode,
  9. context?: SSRContext,
  10. ): Promise<string>
  11. ```
  12. **Usage**
  13. ```js
  14. const { createSSRApp } = require('vue')
  15. const { renderToString } = require('@vue/server-renderer')
  16. const app = createSSRApp({
  17. data: () => ({ msg: 'hello' }),
  18. template: `<div>{{ msg }}</div>`,
  19. })
  20. ;(async () => {
  21. const html = await renderToString(app)
  22. console.log(html)
  23. })()
  24. ```
  25. ### Handling Teleports
  26. 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:
  27. ```js
  28. const ctx = {}
  29. const html = await renderToString(app, ctx)
  30. console.log(ctx.teleports) // { '#teleported': 'teleported content' }
  31. ```
  32. ## Streaming API
  33. ### `renderToNodeStream`
  34. Renders input as a [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_class_stream_readable).
  35. **Signature**
  36. ```ts
  37. function renderToNodeStream(input: App | VNode, context?: SSRContext): Readable
  38. ```
  39. **Usage**
  40. ```js
  41. // inside a Node.js http handler
  42. renderToNodeStream(app).pipe(res)
  43. ```
  44. **Note:** This method is not supported in the ESM build of `@vue/server-renderer`, which is decoupled from Node.js environments. Use `pipeToNodeWritable` instead.
  45. ### `pipeToNodeWritable`
  46. Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) instance.
  47. **Signature**
  48. ```ts
  49. function pipeToNodeWritable(
  50. input: App | VNode,
  51. context: SSRContext = {},
  52. writable: Writable,
  53. ): void
  54. ```
  55. **Usage**
  56. ```js
  57. // inside a Node.js http handler
  58. pipeToNodeWritable(app, {}, res)
  59. ```
  60. ### `renderToWebStream`
  61. Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
  62. **Signature**
  63. ```ts
  64. function renderToWebStream(
  65. input: App | VNode,
  66. context?: SSRContext,
  67. ): ReadableStream
  68. ```
  69. **Usage**
  70. ```js
  71. // inside an environment with ReadableStream support
  72. return new Response(renderToWebStream(app))
  73. ```
  74. **Note:** in environments that do not expose `ReadableStream` constructor in the global scope, `pipeToWebWritable` should be used instead.
  75. ### `pipeToWebWritable`
  76. Render and pipe to an existing [Web WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) instance.
  77. **Signature**
  78. ```ts
  79. function pipeToWebWritable(
  80. input: App | VNode,
  81. context: SSRContext = {},
  82. writable: WritableStream,
  83. ): void
  84. ```
  85. **Usage**
  86. This is typically used in combination with [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream):
  87. ```js
  88. // TransformStream is available in environments such as CloudFlare workers.
  89. // in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
  90. const { readable, writable } = new TransformStream()
  91. pipeToWebWritable(app, {}, writable)
  92. return new Response(readable)
  93. ```
  94. ### `renderToSimpleStream`
  95. Renders input in streaming mode using a simple readable interface.
  96. **Signature**
  97. ```ts
  98. function renderToSimpleStream(
  99. input: App | VNode,
  100. context: SSRContext,
  101. options: SimpleReadable,
  102. ): SimpleReadable
  103. interface SimpleReadable {
  104. push(content: string | null): void
  105. destroy(err: any): void
  106. }
  107. ```
  108. **Usage**
  109. ```js
  110. let res = ''
  111. renderToSimpleStream(
  112. app,
  113. {},
  114. {
  115. push(chunk) {
  116. if (chunk === null) {
  117. // done
  118. console(`render complete: ${res}`)
  119. } else {
  120. res += chunk
  121. }
  122. },
  123. destroy(err) {
  124. // error encountered
  125. },
  126. },
  127. )
  128. ```