react-preload-hook

Adds a preload hook to React Component which can be ignored on a second server render

Problem

react-dom/server#renderToString is synchronous. All asynchronous state changes, like fetching data, will not end up in the initial render. So a second render pass is necessary after all asynchronous calls are resolved to render the complete html. But the problem is that you don't want to trigger all asynchronous calls again.

Solution

The temporary solution to the problem is to add a preload hook to the React Components that will only trigger in the first render pass. Temporary? Yes, renderToString is quite heavy and calling it twice feels like ineffective. I'm expecting better solutions to popup in the near future.

Example

// App
import React from 'react';

@preload
class App extends React.Component {

  preload() {
    console.log('fetch data');
    const { dispatch } = this.props;
    dispatch(fetchUsers());
  }

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}


// Server
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import PreloadContext from 'PreloadContext';
import App from './App';

const server = express();
const port = 3000;
server.use(handleRequest);
server.listen(port);

function handleRequest(req, res) {

  renderToString(<PreloadContext preload={true}><App /></PreloadContext>);

  // the first render pass will trigger the fetches
  // wait till all promises are resolve from the redux store
  // before rendering the second pass with a full store
  const promises = store.getState().pending.actions.map(action => action.promise);
  Promise.all(promises).then(() => {
    const html = mustache.render(template, {
      initialState: JSON.stringify(store.getState()),
      html: renderToString(<PreloadContext preload={false}><App /></PreloadContext>)
    });
    res.send(html);
  });

}