Server Side Rendering with React and Redux

Explore server side rendering, universal isomorphic JavaScript, and how switching from commonjs to ES2015 imports with webpack and babel unifies server and client code.

Create two bundles with webpack: a separate client bundle to prevent shipping server code. Configure a client webpack file, use src/client/client.js, output to public, and add a dev build script.

Clarify why we create a separate client.js bundle from the server bundle and how this separation supports server side rendering, booting the client, and protecting server code.

Refactor the isomorphic app by extracting the babel setup into a shared webpack base config and merging it into client and server configs, prepping for React Router and Redux.

Create a shared routes component using React Router to map the home route at exact path /, and wire it for client hydration with browser router for server-side routing.

Explore how HTML mismatch arises between server rendering and client hydration, triggering a missing matching div error, and discover debugging steps to align server and client markup.

Learn server side routing by replacing home rendering with a static router and routes, pass the request path via location to the router in render to string, and test Express.

Import reducers into the client and the store helper, wire up combine reducers, test in the browser, resolve a simple error, and prepare to build the user list component.

Create a users list component that fetches users via a Redux action on mount, maps state to props, and renders a simple list, while comparing server versus client data loading.

Set up a /users route and render the users list. Import Babel polyfill on server and client to fix the regenerator runtime error and enable Redux SSR later.

Analyze a two-pass rendering strategy for data loading in server-side rendering with Redux, and preview the alternative solution.

Pass the Redux store to each load data function and dispatch the fetch users action to load data for matched routes. Await the returned promise before rendering the app.

Explore a page-based approach by distinguishing root level page components from reusable ones, adding load data functions to page components, and refining routes for clearer data loading.

Explore client-side state rehydration in server-side rendering with React and Redux, diagnosing hydration mismatches and preserving prefetch data from server to the browser.

Expose server side state to the client by injecting window.initial_state in the HTML and initialize the Redux store with it, enabling preloaded user data and faster rendering.

Understand how authentication changes with server side rendering, as the render server secures api calls using cookies and navigates cross-domain cookie challenges from the oauth flow.

Implement a reusable header component that appears on every page, with logo, links to users and admins, and a login/logout button, and introduce an app component that hosts the header.

fetch the current user to determine authentication, implement an auth reducer, and wire it into the root reducers to drive header button states based on api responses.

Attach a load data function to the app component to call the fetch current user action on every route, dispatch and return its result for header authentication.

Connect the header to the auth state via mapStateToProps to show the appropriate button, fetch current status with an action creator, and test authentication through the React SSR API.

Implement a not found page and return a 404 status for unrecognized routes to improve user experience and clearly communicate missing pages.

Explore error handling in server side rendering with React and Redux, focusing on why rendering on error with Promise.all is flawed and how to wait for all requests before rendering.

Wrap each load data promise in an outer promise that resolves on completion or failure, so Promise.all waits for all requests and renders only after all finish, even with errors.