babel-plugin-react-ssr v1.0.1
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 withMyComponent
andTest
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 allstatic fetchData
methods required for the matched route.
5 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago