babel-plugin-react-ssr

🔍 Overview

A babel plugin for react-ssr to remove the need to declare ssrWaitsFor array and the ssrFetchData HOC on any component. It abstracts some complexity away to enable react-ssr to be one single, simple rule for developers. 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 (e.g. if you navigated to the HomePage from another page within the app, via react-router links or similar).
• Read the ssrWaitsFor property before a server-side render to simulatenously call all static fetchData methods required for the matched route.