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 |