Babel-plugin-react-ssr NPM

babel-plugin-react-ssr

Overview

A babel plugin to remove the need to declare ssrWaitsFor array and the ssrFetchData HOC on any component. This plugin will find every consumed React component during transpilation and do the following:

Add a static ssrWaitsFor array

If the React component contains a static fetchData method, it will also:

Add an import and wrap the component in a HOC (higher order component)

Read the example below if you'd like know why these hidden properties are added.

Installation

$ npm install react-ssr --save
$ npm install babel-plugin-react-ssr --save-dev

Usage

Chuck me straight in the .babelrc and you're done.

{
  "plugins": ["react-ssr"]
}

Example

Let's assume you have a page like this, with data calls you want to server-side render:

import React, { Component } from 'react'
import MyComponent from './components/MyComponent'
import Test from './components/Test'

class HomePage extends Component {
  static fetchData () {
    const myThing = new Promise((resolve, reject) => {
      fetch('/api')
        .then(res => res.json())
        .then(resolve)
        .catch(reject)
    })

    return {
      title: someApiCallThatReturnsATitle(),
      thing: myThing
    }
  }

  renderTest () {
    return <Test />
  }

  render () {
    return (
      <div>
        Here's the title prop: {this.props.title}
        {this.props.thing}
        <MyComponent />
        {this.renderTest()}
      </div>
    )
  }
}

export default HomePage

The babel plugin will:

Add a static ssrWaitsFor, populating it with MyComponent and Test

HomePage.ssrWaitsFor = [
  MyComponent,
  Test
]

The plugin will detect the HomePage has a static fetchData method and therefore:

Wrap it in a HOC (that comes from react-ssr)

import ssrFetchData from 'react-ssr/lib/fetchData'
// the component code in between
export default ssrFetchData(HomePage)

react-ssr can then:

Use the HOC client-side to execute fetchData methods.
Read the ssrWaitsFor property before a server-side render to simulatenously call all static fetchData methods required for the matched route.