قالب وردپرس درنا توس
Home / Tips and Tricks / How to generate static websites with React – CloudSavvy IT

How to generate static websites with React – CloudSavvy IT



react logo

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.

React is a popular framework used to create dynamic web apps. It divides HTML into component files in a format called JSX and uses JavaScript to dynamically render pages. This is very useful, but there is a problem ̵

1; loading times are much longer than basic pages without JavaScript. React works by charging a bundle.js file 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 question then is, why bother going through all this effort to use a complete JavaScript framework like React, for a non-web app that will not change? Well, even if the page does not change for each user’s request, web pages do not usually stay the same over time. Most companies will update their websites frequently, such as when you release a new product, run a campaign or just want to update things for a new look.

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.

Of course, this is not for everyone, as React requires a lot of JavaScript knowledge to use properly. Alternatively, if you just want to create a simple website that will not be difficult to update, you should explore a Content Management System (CMS) like SquareSpace or even WordPress.

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.

Using React-static

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:

react-static create

Give your project a name and choose which template you want to use. The “basic” option is standard JS, but there is also a TypeScript variant, which many people prefer over standard JavaScript for larger projects. If you are more familiar with statically written languages, select TypeScript, otherwise select “Basic”.

Name your project, select a template.

It takes a second to install some NPM dependencies and set up the project. The main files are in /src/, med 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.

    Install NPM dependencies, set up projects.

IN 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 static.config.js.

The beginning of rendering.

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 run build:

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.


Source link