React is often used to make dynamic web apps that respond to user input, but it’s also quite useful for static sites. React sites can even be pregenerated during the build process to save on precious milliseconds during page load.
What Is a Static Site?
Static sites are HTML that is delivered to the user directly, rather than generating the page for each request. For example, this article you’re reading was instead dynamically generated by WordPress talking to a database, which caused the PHP code to render out paragraphs of HTML.
React is a popular framework used to make dynamic web apps. It splits HTML into component files using a format called JSX, and uses JavaScript to dynamically render pages. It’s very useful, but there’s one problem—the loading times are a lot longer than basic pages with no JavaScript. React works by loading a bundle.js file on the client, which renders out the page, but this takes time. Page load times directly affect user experience, and on important sites like landing pages, every millisecond can directly affect revenue.
To fix this, React has a couple of third-party tools for generating static sites. The basic idea is that rather than rendering on the client side, it renders on the dev’s machine during the build process, thus saving on load times. You then take this static site’s HTML, and serve it like a regular webpage.
The question then is, why bother going through all this effort to use a fully fledged JavaScript framework like React, for a non-web app that isn’t going to change? Well, even though the page isn’t changing for every user’s request, webpages don’t usually stay the same over time. Most businesses will update their sites frequently, like whenever you release a new product, run a promotion, or just want to refresh things for a new look.
The benefit React offers is a much easier code updates compared to not using a framework. If you’re just making your site with HTML and CSS, you’ll need to do more work to make small styling changes, and you’ll need to do a lot of work to make large templating changes. With React, even if you use the same component multiple times, you simply just need to update the one component file, and it will apply the changes wherever you use it in your project.
Of course, it isn’t for everyone, as React requires a fair bit of JavaScript knowledge to use properly. Alternatively, if you’re just looking to make a simple website that won’t be a pain to update, you should look into a Content Management System (CMS) like SquareSpace or even WordPress.
There are a couple competing “React Static” frameworks out there, which often bring added functionality and added control that is useful for large production apps. Gatsby is very popular, as is Next.js. For this guide, we’ll be using react-static, which just provides a simple and lightweight way to generate static sites, and is easy to use for beginners.
A note before we begin: because the rendering all happens on the client side (unless you’re using server-side rendering), React is technically “static” as far as your web server is concerned. The files that you host on your web server don’t change in response to requests like PHP would. However, this is largely a technicality, because the pages are still rendered dynamically, just on the client.
Using React-Static
react-static is pretty easy to use. First, you’ll need to install Node.JS and NPM on your machine. react-static is simply an NPM package, which you can install globally:
Then, you can run the project creation tool:
Give your project a name, and select which template to use. The “basic” option is standard JS, but there is also a TypeScript variant, which plenty of people prefer over standard JavaScript for larger projects. If you’re more familiar with statically typed languages, choose TypeScript, otherwise, select “basic.”
This will take a second to install some NPM dependencies and set up the project. The main files are in /src/, with index.jsx being the very root of the app, and App.jsx being the primary router that controls which pages the user sees. In /dist/, you’ll fine the output of the build (after you run it) that you’ll put on your web server.
In App.jsx, you’ll find the start of the rendering. The Router component renders out each page in /src/pages/, depending on the URL. The configuration for this is handled in static.config.js.
You can actually have dynamic routes in your application—any route configured with the
To launch the app, you can start the development server:
To run a build to deploy to your web server, do run build:
The outputted files will be in /dist/. You’ll, of course, find each HTML page to be rendered out in advance, with any dynamic pages still loading React binaries.
