rofrischmann/fela

# rehydrate

> This method is used for universal rendering where styles are prerender on the server.<br />For client-side only rendering, we recommend using [render](api/fela-dom/render) directly.

Rehydrates the renderer's cache from existing `<style>` elements.<br />It is primarily used to rehydrate the cache from server-rendered CSS.

It automatically connects the renderer with the DOM by calling [render](api/fela-dom/render) once finished rehydrating.

## Arguments

| Argument       | Type                                                                     | Description                                        |
| -------------- | ------------------------------------------------------------------------ | -------------------------------------------------- |
| renderer       | [_Renderer_](api/fela/renderer)                                          | The renderer which's cache is rehydrated.          |
| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)?_ | Document in which's head the styles are injected.. |

## Example

Assuming we have the following server-rendered elements:

```html
<style data-fela-type="RULE">
  .a {
    color: red;
  }
  .b {
    color: blue;
  }
</style>
```

```javascript
import { createRenderer } from 'fela'
import { rehydrate } from 'fela-dom'

const renderer = createRenderer()

rehydrate(renderer)

const rule = (props) => ({
  color: props.color,
})

renderer.renderRule(rule, { color: 'red' }) // => a
renderer.renderRule(rule, { color: 'green' }) // => c
renderer.renderRule(rule, { color: 'blue' }) // => b
```