jsx-isomorphic-fetch

What does JSX Isomorphic Fetch do?

JSX Isomorphic Fetch is a provider that allows your Isomorphic applications to resolve fetch requests before responding to the user. This enables you to send api data or anything else down in your initial request/html. This package does not interfere with vanilla fetch functionality, instead it provides a new function that is supplied in the context passed down from the provider.

Performance

Having your server wait for api requests to complete before it responds to the users request is bad for performance. To avoid the performance degradation all requests that use this should be cached on your server.

Security

Because best practices with "JSX Isomorphic Fetch" require you to cache the request, all secure api requests should done through a regular fetch call and not with "JSX Isomorphic Fetch"

How to use it

There are three main parts to using "JSX Isomorphic Fetch" setting up the provider, getting the fetch call from context, and triggering two renderToString calls.

Provider

The Provider should be the highest level component in your application and it should be used as the wrapper in the render or renderToString call.

React: Browser Entry Rendering

import {Provider, IsomorphicFetch} from 'jsx-isomorphic-fetch'
let isomorphicFetch = new IsomorphicFetch()
isomorphicFetch.store = window._isomorphicFetch_store_

render(
  <Provider isomorphicFetch={isomorphicFetch}>
    <MyApplication />
  </Provider>,
  document.querySelector('#mount')
)

Preact: Browser Entry Rendering

import {Provider, IsomorphicFetch} from 'jsx-isomorphic-fetch'
let isomorphicFetch = new IsomorphicFetch()
isomorphicFetch.store = window._isomorphicFetch_store_

render(
  <Provider id="application" isomorphicFetch={isomorphicFetch}>
    <MyApplication />
  </Provider>,
  document.querySelector('#mount'),
  document.querySelector('#application')
)

Fetching Data

The Provider passes down isomorphicFetch as context, you need to get it out of context before you can use it. IsomorphicFetch has two functions you will want to use here: fetch and clear.

Initial state cant be set in constructor as context is not avalible yet, initial state is what allows the server to render the data.

import PropTypes from 'prop-types'

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
    const initialData = this.context.isomorphicFetch.initial('MyDataID')

    // Set initial states
    this.state.title = initialData ? initialData.title : null

    this.context.isomorphicFetch.fetch(
      'MyDataID',
      // Array of vanilla js fetch arguments
      ['/my_data.json', {method: 'get'}],

      // This is a middleware function that allows you to process the fetch response.
      function(response) {
        return response.json()
      }
    ).then(function(data) {
      // do stuff with data
    })

    // every call to the same url will be cached, to clear the cache use .clear
    // the cache cannot be cleared on the server with this.
    this.context.isomorphicFetch.clear('MyDataID')
  }

  componentWillUnmount () {
    this.context.isomorphicFetch.clear('MyDataID')
  }
}

MyComponent.childContextTypes = {
  isomorphicFetch: PropTypes.func
}

Rendering on the server

To render on the server it requires you to run render to string twice. The second render waits for all promises to complete.

import render from 'preact-render-to-string' // or react alternative
import {Provider, IsomorphicFetch} from 'jsx-isomorphic-fetch'

let isomorphicFetch = new IsomorphicFetch()
isomorphicFetch.isServer = true

let application = (  
  <Provider id="application" isomorphicFetch={isomorphicFetch}>
    <MyApplication />
  </Provider>
)

// Trigger initial renderToString this will start resolving the data.
render(application)

// .resolve returns a promise
isomorphicFetch.resolve().then(function() {
  // .store will already be processed with  JSON.stringify
  let myAppAsHTMLString = render(application)
  let myAppsData = '<script> window._isomorphicFetch_store_ = ' + isomorphicFetch.store + '</script>'

  // Resolve your server request however your server is setup to do that.
  resolveMyServerRequest(myAppAsHTMLString, myAppsData)
})