GitHub

  • modules : the app modules provided by code splitting
  • The Module component allows to do code splitting.
  • modules : array of modules passed by the server side to the client side for preloading.
  • To use code splitting, you will need to import the Module component and provide the System.import call inside the module property of that component.
  • then (({ html , modules }) => { modules = extractModules ( modules , stats ); // send html and modules to client side });

react-router-server – Server Side Rendering library for React Router v4.

@GabrielBullT: react-router-server version 1 released! Next generation SSR for React Router v4 and Webpack 2! #reactjs #webpack

Server Side Rendering library for React Router v4.

This library allows to fetch states for your components on the server side and mount them on the client side.

It also allows to do code splitting by providing a component that can be used to load modules splitted by Webpack 2.

A working example using Webpack bundle and preloading is provided here. To try for yourself, you can clone it and run it. This will provide a server accessible at http://localhost:3000.

To render an app that has code splitting or state fetching, you need to load the modules and states required by your app before rendering.

function provided by this library. This function will return a promise that will return the rendered app once the modules and states are loaded.

import { renderToString } from ‘react-router-server’; import App from ‘./path/to/app’; renderToString() . then(({ html }) => { // send html to client side });

The code splitting consist of a component that you can use to load modules splitted by Webpack 2. It also allows you to get information on the modules required to render a page so that you can preload the modules before displaying the page on the client side.

call inside the module property of that component. Then, you need to defined a callback function as the children of the component.

import {┬áModule } from ‘react-router-server’; ┬áSystem . import(‘./Foo’) }> { module => module ? :

Loading…

}

method and pass the modules from the server into that method.

would be provided by the server and rendered in the HTML document as a global variable.

import { preload } from ‘react-router-server’; import { render } from ‘react-dom’; import App from ‘./path/to/app’; preload(__INITIAL_MODULES__). then(() => render(, document . getElementById(‘#my-app’)));

method. For more information on usage with webpack, check the usage with webpack part of this read me.

import { renderToString, extractModules } from ‘react-router-server’; import App from ‘./path/to/app’; import stats from ‘./path/to/stats’; renderToString() . then(({ html, modules }) => { modules = extractModules(modules, stats); // send html and modules to client side });

calls on the server side, you will need to install the babel-plugin-system-import-transformer plugin.

On the server side, you will often need to fetch data before rendering your component and then pass that data to the client side so that the components are in sync.

action to the props of your component.

import * as React from ‘react’; import { fetchState } from ‘react-router-server’; @fetchState( state => ({ message: state . message }), actions => ({ done: actions . done }) ) class MyComponent extends React . Component { componentWillMount() { if (! this . props . message) { setTimeout(() => { this . props . done({ message: ‘Hello world!’ }); }, 10); } } render() { return (

{ this . props . message }

); } }

property.

would be provided by the server and rendered in the HTML document as a global variable.

import { ServerStateProvider } from ‘react-router-server’; import App from ‘./path/to/app’;

function on the server side.

import { renderToString } from ‘react-router-server’; import App from ‘./path/to/app’; renderToString() . then(({ html, state }) => { // send html and state to client side });

You can extract the required modules per requests when running your server to pass them to the client side. This allows you to preload your modules before running the client side app. To do so, you need to get the stats from Webpack.

file that you can use to extract the required modules for your app.

as well as the stats generated by webpack. See the code splitting usage part of this documentation to learn more on code splitting.

calls on the server side, you will need to install the babel-plugin-system-import-transformer plugin.

component of React Router.

import { Match } from ‘react-router’; import {┬áModule } from ‘react-router-server’; ( System . import(‘./Foo’) }> { module => module ? :

Loading…

} ) } />

modules: modules provided by the renderToString method.

stats: stats generated by webpack.

mapStateToProps(state): function to map the state provided by the done action to props in your component;

mapActionsToProps(actions): function to map the actions to props in your component; Currently, only the done action exists and is used when you are finished fetching props.

The Module component allows to do code splitting. The Module component takes these propeties:

modules: array of modules passed by the server side to the client side for preloading.

Async version of ReactDOM.renderToString.

element: The element to render

Returns an object ({ html, state, modules }) with:

html: the rendered HTML

state: the app state provided by fetch state

modules: the app modules provided by code splitting

prop.

Everyone is welcome to contribute and add more components/documentation whilst following the contributing guidelines.

React Router Server is licensed under The MIT License (MIT).

GitHub