Server Side Rendering with Redux

Turbo 360

In this series, we create a simple React Redux application in which users can register and log in. Afterward, we render the React components on the server side in consideration on the Redux state. We check if the user is logged in and render a different UI based on the logged in state (using standard session management). Finally, we make sure the client side state of the Redux store is consistent with the server side in order to ensure both environments render the same data.


User Registration and Login

To set up, we create a basic page where users can register and log in. This enables us to track the logged in state of the user with session storage. In doing so, we will then render our React components differently based on the logged in state of the user.

Server Side Rendering

In this video we render our React components on the server and set the initial state for the Redux store. We then pass off the state to the client side in order to 'sync' the two environments with consistent data on both sides. Finally, we confirm by rendering different UI based on the logged-in status of the user.

Membership Options