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

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>
    )
  }
}