React SSR Quickstart ⚛️ 📦

Starter template for server-side and client-side rendering of a React app

Preview

Use this project

About

This app uses Server-Side Rendering. So a Node server running React renders HTML, which can be rendered even by a crawler, or a browser that has JS disabled. This initial app view is not interactive. Then the JS assets load later and the app becomes interactive.

Learn more about React on Dev Resources. See specifically the SSR section.

Warning

The Server-Side Rendering approach with a backend server may not be right for you.

It can be complex to manage, requires a backend server to be running like Node or Python, performance may be worse because of not using static assets, and if you have no database or similar data source then there is little benefit for having a server that dynamically renders data for each page request.

So, if you want If you want to improve the performance of your app on initial page load or to improve your SEO rankings (with pre-rendered content friendly for crawlers), consider approaches which output a directory of static HTML that doesn't need JavaScript to run.

• Add a pre-rendering tool at build time, like presite. Then you can serve the static HTML output.
• Use a static site generator that is built on React, such as Next.js or Gatsby. They can handle React syntax and they make Markdown content writing easy. Plus Next.js allows some hybrid approaches of server-side backend, SPA, and static content.

Structure

• src/
  • server.js - Server-Side Rendering entry-point. Note use of ReactDOMServer.renderToString which turns the app into a flat string that can be read without JS but is frozen.
  • client.jsx - Set up app and pass it parameters. Note use of ReactDOM.hydrate to animate the app. This is in place of the standard ReactDOM.render.
• dist/
  • Output directory for compiled server-side and client-side scripts, generated by Webpack.

Note that there is no point in setting up a plain .html file here, since this app is designed to run only with a Node server and frontend static assets. Unlike the traditional Create React App flow which has a standalone index.html which gets added to the build directory. And you can still run build command in the SSR app, but it generates JS for loading on the homepage, but not a .html file.

Documentation

Requirements

• Node
• Make
  • A task runner than is standard on macOS and Linux but must be installed or left out on Windows.
  • See Makefile for commands you can run with make COMMAND.

Installation

Install Node - see instructions.

Clone the repo:

$ git clone git@github.com:MichaelCurrin/react-ssr-quickstart.git
$ cd react-ssr-quickstart

Install project packages:

$ make install

Usage

Start the dev server:

$ make serve

That will:

• Run the Webpack build task and then continue to build by watching for changes.
• Run the Node app using nodemon and Express.

The make command already allows parallel jobs with the -j flag, as set in Makefile, so that avoids having to depend on another package like concurrently.

Then open the browser at:

• http://localhost:3000

Deploy

Since this project uses Express and React on the server side, in Production you'll have to a deploy a Node app.

Build the app:

$ make build

See dist/public for static assets for the client, served as /static/ URL path.

Start the Node server:

$ npm run dev

Which is roughly equivalent to this:

$ cd dist
$ node index.js

License

Released under MIT by @MichaelCurrin.