React is often used to create dynamic web apps that respond to user input, but it is also quite useful for static websites. Reaction sites can even be pre-generated during the build process to save valuable milliseconds under page load.
What is a static website?
Static websites are HTML that is delivered directly to the user, rather than generating the page for each request. For example, this article, which you read dynamically, was generated by WordPress talking to a database, which caused the PHP code to present snippets of HTML.
bundle.jsfile on the client, which publishes the page, but it takes time. Page load times directly affect the user experience, and on important websites such as landing pages, every millisecond can directly affect revenue.
To fix this, React has a couple of third-party tools for generating static websites. The basic idea is that rather than rendering on the client side, it gives it on the dev machine during the construction process, saving load times. You then take the HTML of this static HTML and serve it as a regular web page.
The advantage that React offers is a much simpler code update compared to not using a framework. If you only create your website with HTML and CSS, you have to do more work to make small styling changes and you have to do a lot of work to make big template changes. With React, even if you use the same component multiple times, you simply need to update a component file and it will apply the changes wherever you use it in your project.
There are a couple of competing “React Static” frames out there, which often provide extra functionality and extra control that is useful for large production apps. Gatsby is very popular, as are Next.js. We will use this guide
react-static, which only provides a simple and easy way to generate static websites and is easy to use for beginners.
A note before we begin: since rendering is all done on the client side (unless you use server rendering), React technical “Static” when it comes to your web server. The files you host on your web server do not change in response to requests that PHP would make. However, this is largely a technology, as the pages are still rendered dynamically, only on the client.
react-static is quite easy to use. First you 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 tool to create projects:
It takes a second to install some NPM dependencies and set up the project. The main files are in
index.jsx is the very root of the app, and
App.jsx is the primary router that controls which pages the user views. IN
/dist/, you fine the result of build (when you run it) that you put on your web server.
App.jsx, You will find the beginning of the rendering. The
Router component reproduces 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 – which route is configured with
the component is not affected by the static renderer.
To start the app, you can start the development server:
npm run start
Make to run a build to distribute to your web server
npm run build
The output files are in
/dist/. Of course, you will find every HTML page to be displayed in advance, with dynamic pages still loading React binaries.