https://github.com/djgrant/react-warmup

warmup(<App />.then(renderToString)
https://github.com/djgrant/react-warmup

react ssr

Last synced: 6 days ago
JSON representation

warmup(<App />.then(renderToString)

• Host: GitHub
• URL: https://github.com/djgrant/react-warmup
• Owner: djgrant
• Created: 2017-02-26T21:01:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-02-28T02:06:13.000Z (over 7 years ago)
• Last Synced: 2024-10-11T00:37:25.195Z (28 days ago)
• Topics: react, ssr
• Language: JavaScript
• Homepage:
• Size: 31.3 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-warmup

A warm up routine to prepare data-dependent apps for server  rendering.

[![npm](https://img.shields.io/npm/v/react-warmup.svg?style=flat-square)](http://npm.im/react-warmup)

[![MIT License](https://img.shields.io/npm/l/react-warmup.svg?style=flat-square)](http://opensource.org/licenses/MIT)

[![Travis](https://img.shields.io/travis/djgrant/react-warmup.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/redux-quest)

```js

const warmup = require('react-warmup');

const { renderToString } = require('react-dom/server');

warmup()

  .then(renderToString)

  .then(html => {

    res.render('reactView', { html, state });

  });

```

## Overview

`warmup` is a nonintrusive function that:

- Traverses a provided React tree and calls `componentWillMount` on

every class component it encounters.

- If `componentWillMount` returns a promise, it will wait for the promise to resolve before rendering its children and continuing to traverse the tree.

- Once all those promises have resolved, `warmup(tree)` will then itself resolve with the tree that was originally provided to it.

A few things worth noting:

- `warmup` does not modify the tree or do anything to persist data from one render routine to the next.

- The developer is responsible for getting the app warmed up during the `warmup` routine by, for example, populating a redux store or priming a cache.

- Pausing rendering whenever asynchronous work is taking place in the component means that the app is traversed in its complete state and, critically, deeply nested components are reached during the warm up routine.

## How to use

To prepare your app to be rendered to HTML

- Place asynchronous work inside of `componentWillMount`

- Return a promise

- Store the result to a persistence layer e.g. memcached, lru-cache, redux etc.

```js

// Some kind of persistence layer

var cache = [];

class Posts extends React.Component {

  componentWillMount() {

    // When the app is finally rendered to string the cache should already be primed

    if (cache.length) {

      return;

    }

    // During the warmup routine traversal is paused while asynchronous work is done

    return fetch(POSTS_URL)

      .then(response => response.json())

      .then(posts => {

        this.setState({ posts });

        cache = posts;

      });

  }

  // When the above promise is resolved the child components can be rendered and traversed

  render() {

    var { posts } = this.state;

    return (

      


        {posts

          ? posts.map(post => )}

          : }

      

    )

  }

}

```