universal-redux-thunk

Redux Universal

This project has been forked from: https://github.com/reducks/redux-universal

A Redux store enhancer taking care of promise resolution for building universal apps.

Background

Rendering a Redux application on the server requires you to give up on certain programming patterns. For once you can't use singletons on the server as they would be shared between multiple users. Another issue we encountered is resolving Promises trigger from actions within components. While many Redux boilerplates use custom routers to handle data fetching on the client & server we decided to approach it differently. Our goal was to surface a minimal API that can be plugged into any existing Redux application without adding limitations in the way people built their applications.

Setup

To install the stable version run:

npm install --save univeral-redux-thunk

How it Works

Redux Universal will catch any Promise returned by redux-thunk middleware. Calling renderUniversal returns a Promise which is fulfilled once all Promises are resolved.

Guide with Redux-thunk

A small example application is provided at: https://github.com/tom-drake/universal-redux-thunk-example

Limitations

To prevent endless loops there is a mechanism to detect in case the same action is triggered multiple times. In this case the promise is rejected. While this works pretty well we still recommend to write your application in a way that double fetching won't be caused by rendering the app multiple times.

Why (Isomorphic) Universal rendering?

####Faster Perceived Load Time

The network roundtrips to load all the resources take time. By already pre-rendering the first page impression the user experience can be improved. This becomes even more important in places with high internet latency.

####Search Engine Indexability

Many search engines only rely on server side rendering for indexing. Google have improved their search crawler to index client side rendered content but by rendering the page on the server you simply remove a potential point of failure in indexing.

####Code Reusability & Maintainability

Libraries can be shared between the backend & front-end.

Client side vs Universal rendering

Use case with client side rendering

• (Client) Request the website's HTML
• (Server) Serve the page without content
• (Client) Request JavaScript code based on sources in the HTML
• (Server) Serve the JavaScript code
• (Client) Load & execute JavaScript
• (Client) -> Render a loading page
• (Client) Request data based on the executed code
• (Server) Collect and serve the data
• (Client) -> Render the content

Caching definitely helps to reduce the loading times and can be done easily for the HTML as well as for the code.

Use case with universal rendering

JavaScript code is already loaded when starting the server. From experience I saw this can take a couple hundred milliseconds.

• (Client) Request the website's HTML
• (Server) Execute the JavaScript Code
• (Server) Collect the data
• (Server) Render the page in the backend
• (Server) Serve the page with content
• (Client) -> Render the content
• (Client) Request JavaScript code based on sources in the HTML
• (Server) Serve the JavaScript code
• (Client) Load & execute JavaScript

Pros & Cons

While with the initial site can be serve faster with client-side rendering there is no relvant content for the user. The network roundtrips increase the time until the user actually sees relevant content. While with the universal approach it takes a bit longer until the user receives the first page it already comes with the content and the total loading time is faster.

Initial Technical Requirements for univeral-redux-thunk

Given the user of redux-thunk it should just work. You may have to do some work to remove the infinite loop issue such as checking that a promise action has not already been dispatched, but this should be no more than a simple if check to check the loading/loaded state of your reducer leaf.

All tools must be ready to work with server-side rendering. Luckily that's the case in the React/Redux eco-sytem:

• React (supports server side rendering)
• React-Router
• Redux (Flux from Facebook uses singletons which makes it hard to use on the backend)
• webpack or browserify
• ismorphic-fetch

License

MIT