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:

- second-container
- second-dehydrator
- second-fetcher
- second-renderer

Installation

``
npm install --save second
`

Usage

`js
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

`js
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:

`jsx
// 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 (



)
}
}
``