GitHub

  • modules : array of modules passed by the server side to the client side for preloading.
  • The ServerStateProvider component is used for providing the server state to the client side.
  • Pass the initial state and modules to your app.
  • You will need to get the webpack stats to extract the modules from webpack.
  • Preload the modules in your JS before rendering the app.

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

@GabrielBullT: Server Side Rendering library for React Router v4 and Webpack 2 #reactjs #reactrouter #webpack #JavaScript

Server Side Rendering library for React Router v4. Allows to do code-splitting using webpack and to fetch data. Renders the page on the server side and resolves all issues with mounting on the client side.

A working example is provided in the example directory of this project. To try for yourself, you can clone this project and run

. This will provide a server accessible at http://localhost:3000.

component provided by this library.

import { Match, importModule } from ‘react-router-server’; importModule(‘moduleName’, ‘./module’, System . import(“./module”)) . then(module => { const Component = module . default; return ; }) } />

decorator.

@fetchProps( state => ({ isLoaded: state . user ? true : false, user: state . user }), actions => ({ done: actions . done }) ) class MyComponent extends Component { componentWillMount() { if (! this . props . isLoaded) { loadAsyncUser() . then(user => this . props . done({ user })); } } render() { … } }

You need to use the renderToString provided by this library:

import renderToString from ‘react-router-server’; import { ServerRouter, createServerRenderContext } from ‘react-router’ const context = createServerRenderContext(); renderToString( );

An initial state and modules to preload will be passed through the context. You will need to pass these to your HTML template to preload the modules and pass the initialState to the client side.

import stats from ‘./stats.json’; const initialState = context . getInitialState(); const modules = context . getModules(stats);

You will need to get the webpack stats to extract the modules from webpack. To do this, you can use the

and add this line to your webpack config plugins.

plugins: [ new StatsPlugin(‘stats.json’) ]

Preload the modules in your HTML file if you are using code-splitting. Pass the initial state and modules to your app.

Preload the modules in your JS before rendering the app.

import React from ‘react’; import { BrowserRouter } from ‘react-router’; import { render } from ‘react-dom’; import { preloadModules, ServerStateProvider } from ‘react-router-server’; preloadModules(__INITIAL_MODULES__). then(() => { render(( ), document . getElementById(‘main’)); });

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.

name: Unique name of your module.

path: Path to your module relative to the current file. Same as the path in the systemImport param.

call.

The Match component is the same as the react-router Match component but can be used for async render methods.

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

context: The server context.

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).

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub