second-dehydrator
v1.7.0
Published
Dehydrate React/Preact components on the server so that they can be rehydrated with their original props on the client.
Downloads
21
Maintainers
Readme
Second Dehydrator
Dehydrate React/Preact components on the server so that they can be rehydrated with their original props on the client.
Installation
npm install --save second-dehydrator
Usage
Dehydrate components before rendering them on the server:
// server.js
import React from 'react'
import { createDehydrator } from 'second-dehydrator'
import MyComponent from './my-component'
const dehydrate = createDehydrator(React.createElement)
const MyDehydratedComponent = dehydrate(MyComponent)
// <MyDehydratedComponent prop1="foo" prop2="bar" /> will render MyComponent
// and a <script> tag containing the dehydrated state and props.
Avoid bundling the dehydrator by defining the DISABLE_DEHYDRATOR
value. For example, with webpack's DefinePlugin
.
Then rehydrate them in the browser:
// browser.js
import React from 'react'
import ReactDOM from 'react-dom'
import { hydrate } from 'second-dehydrator'
// Create a function to render the component
const renderComponent = (Component, props, container) => {
ReactDOM.render(
React.createElement(Component, props),
container
)
}
// Create a map of components. The key names must correspond to the components'
// displayName or name property.
const componentMap = {
MyComponent: () => import(/* webpackMode: "eager" */ './my-component')
}
hydrate(renderComponent, componentMap)