0
# Vue Server Renderer
1

2
Vue Server Renderer provides server-side rendering (SSR) capabilities for Vue.js applications. It offers multiple rendering APIs including string-based rendering, streaming capabilities through various stream implementations, and specialized functions for different server environments including Node.js, serverless functions, and edge computing platforms like CloudFlare Workers.
3

4
## Package Information
5

6
- **Package Name**: @vue/server-renderer
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install @vue/server-renderer` (or use `vue/server-renderer` as of Vue 3.2.13+)
10

11
## Core Imports
12

13
```typescript
14
import { renderToString, renderToWebStream, pipeToNodeWritable } from "@vue/server-renderer";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { renderToString, renderToWebStream, pipeToNodeWritable } = require("@vue/server-renderer");
21
```
22

23
Recommended deep import (Vue 3.2.13+):
24

25
```typescript
26
import { renderToString, renderToWebStream } from "vue/server-renderer";
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { createSSRApp } from "vue";
33
import { renderToString } from "@vue/server-renderer";
34

35
// Create an SSR-ready Vue app
36
const app = createSSRApp({
37
  data: () => ({ message: "Hello from SSR!" }),
38
  template: `<div>{{ message }}</div>`,
39
});
40

41
// Render to HTML string
42
const html = await renderToString(app);
43
console.log(html); // "<div>Hello from SSR!</div>"
44

45
// With SSR context for teleports
46
const context = {};
47
const htmlWithContext = await renderToString(app, context);
48
console.log(context.teleports); // Any teleported content
49
```
50

51
## Architecture
52

53
Vue Server Renderer is built around several key components:
54

55
- **Rendering Engine**: Core logic for converting Vue components to HTML strings
56
- **Streaming System**: Progressive rendering capabilities for better performance
57
- **Multi-Environment Support**: Adapters for Node.js streams and Web Streams API
58
- **Teleport Handling**: Management of content rendered outside normal component hierarchy
59
- **SSR Context**: State management and data passing between server and client
60

61
## Capabilities
62

63
### String Rendering
64

65
Synchronous and asynchronous rendering of Vue applications to complete HTML strings, with support for SSR context and teleport handling.
66

67
```typescript { .api }
68
function renderToString(
69
  input: App | VNode,
70
  context?: SSRContext
71
): Promise<string>;
72

73
interface SSRContext {
74
  [key: string]: any;
75
  teleports?: Record<string, string>;
76
}
77
```
78

79
[String Rendering](./string-rendering.md)
80

81
### Streaming Rendering
82

83
Progressive rendering capabilities for improved performance and user experience, supporting multiple stream implementations and environments.
84

85
```typescript { .api }
86
function renderToSimpleStream<T extends SimpleReadable>(
87
  input: App | VNode,
88
  context: SSRContext,
89
  stream: T
90
): T;
91

92
interface SimpleReadable {
93
  push(chunk: string | null): void;
94
  destroy(err: any): void;
95
}
96
```
97

98
[Streaming Rendering](./streaming-rendering.md)
99

100
### Node.js Integration
101

102
Native Node.js stream integration for traditional server environments and frameworks.
103

104
```typescript { .api }
105
function renderToNodeStream(
106
  input: App | VNode,
107
  context?: SSRContext
108
): Readable;
109

110
function pipeToNodeWritable(
111
  input: App | VNode,
112
  context?: SSRContext,
113
  writable: Writable
114
): void;
115
```
116

117
[Node.js Integration](./nodejs-integration.md)
118

119
### Web Streams Support
120

121
Modern Web Streams API support for serverless environments, edge computing, and modern web platforms.
122

123
```typescript { .api }
124
function renderToWebStream(
125
  input: App | VNode,
126
  context?: SSRContext
127
): ReadableStream;
128

129
function pipeToWebWritable(
130
  input: App | VNode,
131
  context?: SSRContext,
132
  writable: WritableStream
133
): void;
134
```
135

136
[Web Streams Support](./web-streams.md)
137

138
### Internal Runtime Helpers
139

140
Advanced compilation helpers and internal utilities for custom template compilation and specialized SSR scenarios.
141

142
```typescript { .api }
143
function ssrRenderVNode(
144
  vnode: VNode,
145
  parentComponent?: ComponentInternalInstance | null,
146
  slotScopeId?: string
147
): SSRBuffer | Promise<SSRBuffer>;
148

149
function ssrInterpolate(value: unknown): string;
150
```
151

152
[Internal Runtime Helpers](./internal-helpers.md)
153

154
## Types
155

156
```typescript { .api }
157
type App = {
158
  _component: Component;
159
  _props: VNodeProps | null;
160
  _context: AppContext;
161
  provide(key: InjectionKey<any> | string, value: any): this;
162
};
163

164
type VNode = {
165
  type: VNodeTypes;
166
  props: VNodeProps | null;
167
  key: string | number | symbol | null;
168
  children: VNodeNormalizedChildren;
169
  component: ComponentInternalInstance | null;
170
  appContext: AppContext | null;
171
};
172

173
interface SSRContext {
174
  [key: string]: any;
175
  teleports?: Record<string, string>;
176
  __teleportBuffers?: Record<string, SSRBuffer>;
177
  __watcherHandles?: (() => void)[];
178
}
179

180
type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean };
181
type SSRBufferItem = string | SSRBuffer | Promise<SSRBuffer>;
182
```