second/README.md

Build React components with server-only data requirements, then rehydrate them on the client to provide interactivity and event bindings.

# 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](../packages/second-container)
- [second-dehydrator](../packages/second-dehydrator)
- [second-fetcher](../packages/second-fetcher)
- [second-renderer](../packages/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](https://preactjs.com/)

```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 (
      <div>
        <SubComponent prop1="foo" prop2="bar">
          <span>Children will be dehydrated as well!</span>
        </SubComponent>
      </div>
    )
  }
}
```