Server Side Rendering with React and Redux

Learn server side rendering by building a simple four-page app with a landing page, user and admin lists, and a not-found page, validating data loading and access control.

Understand a two-tier architecture with an API server for business logic and a separate renderer server for HTML rendering, enabling scalable deployment and future-proofing for changing frameworks.

Implement a boilerplate express server to render the home component as HTML at the root, enabling server side rendering with routing and Redux.

Set up a tiny express server in the src directory on port 3000 that serves a home component at the root route, with client/components/home.js using ES2015 modules.

Turn a React component into HTML with renderToString from react-dom/server, wire it into your Express route, and send the resulting HTML to the browser.

Master server-side rendering with React and Redux by using Webpack and Babel to transpile JSX on the backend, building a bundle.js from index.js and home.js for Node execution.

Configure webpack and babel for server-side rendering to transpile JSX to ES5 in Node, then build and run the server bundle on port 3000.

Explore server side rendering with react and redux, bundling server and client code with webpack and babel, and converting components to HTML using renderToString for initial delivery.

Learn how to automate rebuilding and restarting a server in a server-side rendering workflow by enabling webpack watch and using nodemon to restart on new bundles in the build directory.

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

Demonstrates that the server returns html from the home component with no javascript, so client side event handlers aren’t wired; explains shipping the javascript bundle after html.

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.

Expose the public directory with express static to serve assets. Generate HTML that renders content and include a script tag for bundle.js so the browser downloads the client bundle.

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.

Boot up the client side of a server-rendered React app by hydrating the server-rendered skeleton in the browser, wiring the home route, and binding to the div with id route.

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.

Centralize client and server webpack configurations and start all three development processes with one npm command, running dev server, build server, and build client in parallel.

Exclude server side libraries from the bundle using webpack node externals to speed up the initial webpack startup and illustrate how node modules are handled.

Refactor the server side rendering by extracting the render logic into a dedicated renderer helper in src/helpers/renderer.js, splitting the index.js route handler and simplifying imports for a clearer, scalable codebase.

Delegate html routing to React Router in a two-tier setup, with express handling non-html requests and React Router determining the content shown after the initial server-side render.

Explore how server-side rendering uses a static router for the initial render and swaps to a browser router on the client, via a shared route map.

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.

Learn how to extend Express routing to pass all requests to React router using a wildcard, test a dummy /hi route, and ensure both root and hi routes render correctly.

Load static users and admins from a simple API during server-side rendering, with Google OAuth authentication and routes for /users, /admins, current user, and log out.

Explore how redux must be configured differently for the browser and the server, implement two stores, manage cookie-based authentication, coordinate server data fetching, and handle hydration for server side rendering.

Set up two Redux stores, one on the client and one on the server, and connect them to the React app using a provider and thunk middleware.

Create a server-side Redux store in a separate helper file to keep the render lean. Initialize it in index.js and pass store to render via the provider after loading data.

Create a fetch users action creator and a users reducer to fetch and store a list of users via an ajax request, using axios and redux thunk to dispatch data.

Create a users reducer to handle fetch users, initializing state as an empty array and returning action.payload.data for the fetch users case, then combine it under the users key.

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.

Detect data load completion during server side rendering with Redux by coordinating server and client Redux, action creators, and reducers.

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

Attach data loading functions to components in server side rendering, load data per request based on the URL, then render once the data is ready.

Learn to use the React Router config library to determine renderable components for server side rendering, by defining routes as an array of objects for paths like / and /users.

Replace the root configuration export with an array of route objects and render them using the renderRoutes function from the react router config library, passing the routes array.

Use the react router config matchRoutes to determine which components to render from a routes configuration array based on the incoming request path for server side rendering with redux.

Define load data functions per component and wire them via routes and index.js to preload data before rendering, enabling server-side rendering with React and Redux.

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.

Use Promise.all to wait for all load data promises, render on the server after data completes and loads into the Redux store, and verify server-side rendering by blocking JavaScript.

Review the data loading approach, explaining why we bypass connect, dispatch actions via the store, and how redux flows through middlewares and reducers before rendering.

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.

Refactor by introducing a pages directory, move the home and users list pages into it, rename them to home page and users list page, and update routes and imports.

Refactor routes by exporting a single object per page that includes the component and load data, then use spread syntax to merge into routes and avoid naming conflicts.

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.

Discover how to fix client-side hydration in server-side rendering by transferring Redux initial state to the client via json in the html template and initializing the client store with it.

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.

Explore how server-side rendering can expose a cross-site scripting (XSS) vulnerability when dumping the Redux store state into HTML, and learn to sanitize data with serialize to prevent script execution.

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.

Explain a render server proxy that forwards api authentication cookies, so the browser sees cookies from the render server. Compare page load and follow-up requests, and discuss json web tokens.

cookie-based authentication enables server side rendering by including auth on the initial request, whereas json web tokens require manual attachment to headers, urls, or bodies, causing extra round trips.

Set up a proxy to route API requests between the browser, render server, and API, and ensure the same action creators run on both server and client.

Create a custom axios instance with axios.create for client and server, and pass it to Redux Thunk as an extra argument so action creators use the preconfigured axios.

Create a custom Axios instance on the client with a /api base URL, pass it to Redux Thunk as an extra argument, and use it in action creators.

Create a server-side axios instance with the full Heroku API URL and forward the client cookie. Inject this instance into redux thunks as an extra argument for SSR.

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.

Create an app component in the client directory, export it as a page-like object, and nest existing routes inside it using React Router config to render shared header content.

Build a header component with a logo and links using React and React Router Dom, wiring it into the app and preparing for login and logout states.

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.

Build a header that adapts to authentication status by showing users and admins links and a login or logout button, using a render server proxy to route API authentication flows.

Apply materialize css to style the header navigation and brand logo. Center the welcome text and note that styling is optional while authentication uses OAuth cookies via a proxy.

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

Implement a 404 not found page by creating a simple page component and wiring it into the routes, ensuring the app header remains visible while handling unmatched routes.

Set the Express response to 404 when not found by using res.status(404) and render content via SSR, with a static router context signaling not found.

Build an admin page that fetches the list of admins from an API using a Redux action creator and reducer. Add authentication checks to gate access for server side rendering.

Implement a Redux thunk action creator fetch admins to fetch admin data from the admins api root and wire an admins reducer into the root reducers.

Build the admins route component to render a protected admins list and fetch admins on server render using a Redux connect, mapStateToProps, and the fetchAdmins action.

Wire the admins list page into the app routing and test access in the browser. Authenticate users, simulate JavaScript off, and diagnose unhandled promise errors to verify server-side rendering behavior.

Investigate Promise.all failures in server side rendering by examining two API requests for current user and admins, and implement proper error handling with catch to avoid unhandled promise rejections.

Learn three error-handling strategies for server-side rendering, beginning with a not-recommended catch on a Promise.all to show a generic error, and why continuing to render is preferred.

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.

Introduce a require auth component to authenticate users before accessing the admins page, redirecting unauthenticated users and separating data loading from rendering for robust server and client-side error handling.

Implement a require auth higher order component in a React Redux app to gate pages, manage loading, and redirect unauthenticated users while passing props to the wrapped component.

Wrap the admins list page with the require auth higher order component to show content only when signed in, and manage server redirects using the context prop.

Learn to handle redirects in server side rendering with React and Redux by inspecting the server context during auth checks and applying 301 redirects to the context URL.