0
# Server-Side Rendering
1
2
Server-side rendering capabilities for generating HTML strings from components, supporting both static markup and hydration patterns.
3
4
## Capabilities
5
6
### Render to String
7
8
Renders components to HTML strings for server-side rendering and hydration.
9
10
```javascript { .api }
11
/**
12
* Render a component to an HTML string
13
* @param {VNode} vnode - Virtual DOM node to render
14
* @returns {string} HTML string representation
15
*/
16
function renderToString(vnode);
17
18
/**
19
* Render a component to static HTML markup (alias for renderToString)
20
* @param {VNode} vnode - Virtual DOM node to render
21
* @returns {string} Static HTML string without React-specific attributes
22
*/
23
function renderToStaticMarkup(vnode);
24
```
25
26
**Usage Examples:**
27
28
```javascript
29
import { renderToString, renderToStaticMarkup } from 'preact-compat/server';
30
import App from './App';
31
32
// Server-side rendering with hydration support
33
const html = renderToString(<App />);
34
const response = `
35
<!DOCTYPE html>
36
<html>
37
<body>
38
<div id="root">${html}</div>
39
<script src="/bundle.js"></script>
40
</body>
41
</html>
42
`;
43
44
// Static HTML generation (no hydration)
45
const staticHtml = renderToStaticMarkup(<StaticPage />);
46
```
47
48
## Import Patterns
49
50
```javascript
51
// Import from server module
52
import { renderToString, renderToStaticMarkup } from 'preact-compat/server';
53
54
// CommonJS
55
const { renderToString, renderToStaticMarkup } = require('preact-compat/server');
56
```
57
58
## Integration with Hydration
59
60
When using server-side rendering, you'll typically want to hydrate the rendered content on the client:
61
62
```javascript
63
// Server-side (Node.js)
64
import { renderToString } from 'preact-compat/server';
65
const serverHtml = renderToString(<App />);
66
67
// Client-side
68
import { hydrate } from 'preact-compat';
69
hydrate(<App />, document.getElementById('root'));
70
```
71
72
## Implementation Details
73
74
The server-side rendering functionality is provided through integration with the `preact-render-to-string` package:
75
76
```javascript
77
// Internal implementation (server.js)
78
var renderToString = dep(require('preact-render-to-string'));
79
80
function dep(obj) { return obj['default'] || obj; }
81
82
module.exports = {
83
renderToString: renderToString,
84
renderToStaticMarkup: renderToString // Alias - same implementation
85
};
86
```
87
88
### Key Features
89
90
- **Shared Implementation**: Both `renderToString` and `renderToStaticMarkup` use the same underlying function from `preact-render-to-string`
91
- **Universal API**: Provides the same interface as React's server rendering functions
92
- **Default Handling**: Automatically handles both ES6 default exports and CommonJS modules
93
- **No React-specific Attributes**: Since Preact doesn't use React-specific attributes, the output is naturally "static"
94
95
### Differences from React
96
97
Unlike React's server rendering:
98
- No distinction between `renderToString` and `renderToStaticMarkup` (both produce the same output)
99
- No data-react-* attributes added to the markup
100
- Smaller bundle size and faster rendering performance
101
- Direct compatibility with Preact's client-side hydration
102
103
## Types
104
105
```javascript { .api }
106
type RenderFunction = (vnode: VNode) => string;
107
```