second
v1.7.0
Published
Build React components with server-only data requirements, then rehydrate them on the client to provide interactivity and event bindings.
Downloads
31
Maintainers
Readme
Second
Second is a framework for building and rendering React components on the server. It provides a higher-order data component that enables UI components to declare their data dependencies. Second ensures that all data dependencies are met before completing a render cycle. Components that require interactivity in the browser can be dehydrated with their original props, and rehydrated in the browser.
This package is a convenience wrapper interface around the following Second components:
Installation
npm install --save second
Usage
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import second from 'second'
import MyComponent from './my-component'
second.init({
VDom: React,
VDomServer: ReactDOMServer
})
const MyDataComponent = second.createContainer(MyComponent, {
data: props => ({
events: { // Will be available as this.props.events in MyComponent
uri: `https://api.github.com/users/${props.user}/events/public`
}
})
})
second.render(MyDataComponent, { user: 'wildlyinaccurate' }).then(output => {
// Do something with rendered component output
})
Or with Preact
import Preact from 'preact'
import renderToString from 'preact-render-to-string'
import second from 'second'
second.init({
VDom: Preact,
VDomServer: { renderToString }
})
Dehydrate components to prepare them for rehydration on the client:
// sub-component.js
const React = require('react')
const second = require('second')
class SubComponent extends React.Component {
render () {
// ...
}
}
module.exports = second.dehydrate(SubComponent)
// main-component.js
const React = require('react')
const SubComponent = require('./sub-component')
module.exports = class MainComponent extends React.Component {
render () {
return (
<div>
<SubComponent prop1="foo" prop2="bar">
<span>Children will be dehydrated as well!</span>
</SubComponent>
</div>
)
}
}