Best practices for isomorphic web applications

 

Best Practice

Section

Set up webpack to be ready for production use. 5.5.2
Build React components that can be composed, increasing the reusability of your code. 4.3.1, 4.3.2
Ensure your state is immutable when using Redux by using the spread operator (...) pattern. 6.3.1
Implement routing for the server with React Router. 7.2.1
Render components on the server with React renderToString. 7.2.3
Use a static function to indicate the data needs for each container component in the app. 7.3.2
Serialize the data fetched on the server and attach it to the DOM. 8.2.1
Deserialize the data provided in the DOM and use it to initialize the state of the app. 8.2.2
Avoid isomorphic render warnings by using the React lifecycle method componentDidMount. 8.3.3
Make sure you test your code in all the environments it will run in (server and browser). 9.1.1, 9.2.1, 9.2.2
Isolate code that can only run in the browser by using environment variables. Webpack allows you to inject them into your browser code (process.env.BROWSER). 10.1.2, 10.1.3
To manage SEO, use a static function to add metatags to the <head> of the html page on the server. 10.2.1, 10.2.2
Handle user sessions based on cookies in an isomorphic way. 11.4.1