> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt
> Use this file to discover all available pages before exploring further.
# hydrate
> Attach Preact to existing server-rendered markup
Attaches event listeners and makes existing server-rendered markup interactive.
## Signature
```typescript theme={null}
function hydrate(
vnode: ComponentChild,
parent: ContainerNode
): void
```
## Parameters
The virtual node tree that matches the existing server-rendered HTML structure.
The DOM element containing the server-rendered content to hydrate.
## Return Value
Returns `void`. The function performs a side effect by hydrating the existing DOM.
## Description
The `hydrate` function is used to "hydrate" existing server-rendered HTML markup. Instead of creating new DOM nodes, it attaches event listeners and internal state to the existing DOM structure, making it interactive.
This is particularly useful for:
* Server-side rendering (SSR) scenarios
* Improving initial page load performance
* Progressive enhancement strategies
## Implementation
The hydrate function is implemented in `src/render.js:66` and works by:
1. Setting the `MODE_HYDRATE` flag on the vnode
2. Calling the `render` function with the hydration flag enabled
3. Reusing existing DOM nodes instead of creating new ones
```javascript theme={null}
export function hydrate(vnode, parentDom) {
vnode._flags |= MODE_HYDRATE;
render(vnode, parentDom);
}
```
## Usage Examples
### Basic Hydration
```jsx theme={null}
import { hydrate, h } from 'preact';
function App() {
return (
Hello World
);
}
// Server-rendered HTML exists in the DOM
// Hydrate attaches event listeners without recreating elements
hydrate(, document.getElementById('root'));
```
### Hydration with Data
```jsx theme={null}
import { hydrate, h } from 'preact';
import { useState } from 'preact/hooks';
function Counter({ initialCount }) {
const [count, setCount] = useState(initialCount);
return (
Count: {count}
);
}
// Assume server rendered with initialCount=0
hydrate(, document.getElementById('root'));
```
### Full SSR + Hydration Flow
```jsx theme={null}
// server.js
import { render as renderToString } from 'preact-render-to-string';
import { App } from './App';
const html = renderToString();
res.send(`
${html}
`);
// client.js
import { hydrate } from 'preact';
import { App } from './App';
hydrate(, document.getElementById('root'));
```
## Important Considerations
### Markup Mismatch
The virtual node tree passed to `hydrate` must match the existing HTML structure. Mismatches can cause:
* Unexpected behavior
* Loss of hydration benefits
* Console warnings in development
```jsx theme={null}
// Server rendered:
, root);
```
### Event Handlers
Event handlers are not included in server-rendered HTML. The `hydrate` function attaches them during hydration:
```jsx theme={null}
// Server renders:
// Hydrate adds: onClick handler
hydrate(
,
root
);
```
## Differences from render
* **`render`**: Creates new DOM nodes, replacing existing content
* **`hydrate`**: Reuses existing DOM nodes, only attaching handlers and state
## Related APIs
* [`render`](/api/render) - Standard rendering without hydration
* [`h`](/api/h) - Create virtual nodes
* `preact-render-to-string` - Server-side rendering utility