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.
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 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.
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.
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:
npm i -g react-static
Then, you can run the project creation tool:
This will take a second to install some NPM dependencies and set up the project. The main files are in
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.
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
You can actually have dynamic routes in your application—any route configured with the
<Dynamic /> component will not be affected by the static renderer.
To launch the app, you can start the development server:
npm run start
To run a build to deploy to your web server, do
npm 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.
- › 10 Awesome iPad Features You Should Be Using
- › Lenovo ThinkPad Z13 Gen 1 Review: A Vegan Leather Laptop That Means Business
- › 7 Features Android Should Steal From iPhone
- › Shift+Enter Is a Secret Shortcut Everyone Should Know
- › Keychron Q8 Mechanical Keyboard Review: An Advanced Keyboard for All Uses
- › 10 Hidden Android 13 Features You Might Have Missed