[SSR] 0. Getting Started

In this series, I’ll walk through adding server-side rendering and code splitting to a React app.

You’ll find all the code on GitHub — each step has its own branch, so go dig in!

If you’re adding SSR to React, Next.js is a solid option too. But here I’m skipping the framework and building code splitting and SSR into plain React from scratch.

Here are the versions I used for this series:

{
  "typescript": "3.6.2",
  "@loadable/component": "5.10.3",
  "@loadable/server": "5.10.3",
  "react": "16.8.6",
  "react-router-config": "5.1.1",
  "react-router-dom": "5.0.1",
  "redux": "4.0.4",
  "redux-observable": "1.1.0"
}

Table of Contents

1. Code Splitting

• Picking a library
• Setting up the template HTML
• Configuring things
• Writing the view code
• A few closing thoughts

2. SSR - Basic

• Cleaning up the structure
• Rendering on the server
• Checking the result

3. SSR - Data Fetch

• Switching to react-router-config
• Updating server/app.tsx
• Passing the initial store state to the client
• Using the server’s data to initialize the store

4. SSR, from the User’s Perspective

• The user’s side of things
• It’s not all downsides
• Wrapping up this series