How to Prerender React Apps Using Prerender and NGINX

-











The prerender service will cache the static HTML for a while before requesting a new copy from the server. This method did not require me to change anything on my React app and only required me to make some adjustments to the NGINX server configuration.

This is how my application was being served before prerender came into the mix:















After adding prerender, the flow looked something like this:














Setting up prerender service


There are two ways you can make use of the prerender service. You can either make use of the paid hosted service (contains a free plan as well) or you can run the open source service on your server and interface with that. I decided to opt for the latter. The first step was to install prerender on the server. It was fairly straightforward to do so using npm:

$ npm install prerender

The next step was to create a new node script that ran the service. These 3 lines are enough to get the service up and running:

const prerender = require('prerender');
const server = prerender();
server.start();

Save this code to a server.js file and run it using node:

$ node server.js

At this point you can go ahead and test whether the prerender service is working correctly or not by opening http://localhost:3000/render/?url=https://google.com/. This should display the Google homepage. If the images don’t show up correctly, don’t worry. The issue will be fixed when we serve the prerender service via NGINX.

Run prerender on system start


The next step is to run prerender on system start and make sure it keeps running in case of crash or system restart. We will make this happen by creating a systemd service file. I am assuming that you saved the server.js file in your home folder. My home folder is technopundit but yours might be different so make sure you edit the WorkingDirectory path. Create a prerender.service file in /etc/systemd/system folder with the following contents:

[Unit]
Description=Prerender server for bot crawling
After=network.target

[Service]
User=technopundit
WorkingDirectory=/home/technopundit/
ExecStart=/usr/bin/node server.js
Restart=always

[Install]
WantedBy=multi-user.target

In this file, we are telling systemd to start server.js when the network is up and running. The service would launch under the user technopundit and the command it needs to run is /usr/bin/node server.js. The script would also automatically restart in case of a crash or system restart.

After saving this file, let’s make sure systemd can recognize it:

$ sudo service prerender status

● prerender.service - Prerender server for bot crawling
     Loaded: loaded (/etc/systemd/system/prerender.service; disabled; vendor preset: enabled)
     Active: inactive (dead)

Perfect! Now let’s start the service and then check the status:

$ sudo service prerender start
$ sudo service prerender status

● prerender.service - Prerender server for bot crawling
     Loaded: loaded (/etc/systemd/system/prerender.service; disabled; vendor preset: enabled)
     Active: active (running) since Sat 2022-08-27 19:59:46 UTC; 2s ago
   Main PID: 589168 (node)
      Tasks: 7 (limit: 1137)
     Memory: 41.8M
     CGroup: /system.slice/prerender.service
             └─589168 /usr/bin/node server.js

Aug 27 19:59:46 systemd[1]: Started Prerender server for bot crawling.

Integrating prerender with NGINX


Now that our prerender service is running, we can go ahead and integrate it with NGINX. What we want to do is that the normal user should be sent the normal HTML + JS response but a bot should be sent a response by the prerender service.

The original NGINX configuration file for my React app looked like this:

server {
    server_name example.com;
    root /home/technopundit/example/build;
    index index.html;

    location / {
  	    try_files $uri /index.html;
        add_header Cache-Control "no-cache";
    }

    location /static {
        expires 1y;
        add_header Cache-Control "public";
    }

    location /api {
        include proxy_params;
        proxy_pass http://localhost:5000;
    }
}

This is a fairly generic configuration file. We add some cache headers to certain path responses and pass the /api route traffic to the gunicorn server running on port 5000. Now we just need to make sure that all requests made by a bot are responded to by the prerender service that is running on port 3000. The template file for these changes is conveniently provided by the prerender folks. I took the same file and tweaked it a bit to make it work for my setup. The major thing I changed in the template was to edit the prerender service URL and remove the proxy header part. As I am using a self-hosted service, I replaced service.prerender.io with 127.0.0.1:3000 and because this is our service, we don’t need to pass any authentication headers.

The resulting NGINX configuration file looks like this:

server {
    server_name technopundit.blogspot.com;
    root /home/technopundit/rxcode/REACT/build;
    index index.html;

    location / {
  	    try_files $uri @prerender;
        add_header Cache-Control "no-cache";
    }

    location /static {
        expires 1y;
        add_header Cache-Control "public";
    }

    location /api {
        include proxy_params;
        proxy_pass http://localhost:5000;
    }

    location @prerender {
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        if ($prerender = 1) {
            set $prerender "127.0.0.1:3000";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

I removed the SSL support and redirection from this configuration file for the sake of simplicity.

Testing NGINX configuration


In order to test whether our NGINX config changes did not break anything, we can run:

$ sudo nginx -t

If everything seems correct, we can restart NGINX:

$ sudo service nginx restart

To test whether our service is working the way it is supposed to, we can run the following CURL command:

$ curl -A googlebot https://example.com

Replace example.com with your React-based app URL and see if the output of this command is different from if you run curl without -A googlebot.

If you have reached this step then chances are that your prerender service is working fine. In case there are errors, please write about them in the comments below and I will try to help.




Comments

Post a Comment

Popular posts from this blog

How to download a file using command prompt (cmd) Windows?

-
Image
If you’re like most Internet users, you download various types of files now and then. You either download these files with your web browser or some download manager software. Have you ever considered downloading files using the command prompt i.e. CMD? If not, we recommend you to try it. It’s quite interesting apart from being very useful as well. In this article, we’ll show you how to download a file using command prompt aka CMD. How to download a file using command prompt?   There are several useful commands for the Command Prompt and one of them is  bitsadmin . Though bitsadmin has several uses, here we shall limit this article to its role in downloading files only. If you want to read the details about bitsadmin syntax, continue reading this section. Otherwise, you can scroll down to the next section –  Downloading a file .   The syntax of bitsadmin is : BITSADMIN [/RAWRETURN] [/WRAP | /NOWRAP] command   As you know, the parts of the syntax inside ...
Read more

The future of Artificial Intelligence: 6 ways it will impact everyday life

-
Image
Technology moves at breakneck speed, and we now have more power in our pockets than we had in our homes in the 1990s. Artificial intelligence (AI) has been a fascinating concept of science fiction for decades, but many researchers think we’re finally getting close to making AI a reality.  NPR notes that in the last few years, scientists have made breakthroughs in “machine learning,” using neural networks, which mimic the processes of real neurons. This is a type of “deep learning” that allows machines to process information for themselves on a very sophisticated level, allowing them to perform complex functions like facial recognition. Big data is speeding up the AI development process, and we may be seeing more integration of AI technology in our everyday lives relatively soon. While much of this technology is still fairly rudimentary at the moment, we can expect sophisticated AI to one day significantly impact our everyday lives. Here are 6 ways AI might affect us in the ...
Read more

How to Include ThreeJs in Your Projects

-
Image
HOW TO INCLUDE three.js IN YOUR PROJECTS There are quite a few different ways to include three.js in your JavaScript application, some of them simple, some of them a little more complex, however, they all boil down to one simple idea: you need to include one (and  only one) of these three files in your project: three.js three.min.js three.module.js You can view them all  on the three.js GitHub repo , which we’ll explore in the next chapter. Each of these files a version of the three.js core, meaning that once you’ve included one of them in your application, you are all ready to get started in creating beautiful 3D scenes. There are two main ways to include these files in your project: include them in a  script tag  in your HTML import them directly into your JavaScript files. We’ll explore how to do in Section Two What’s the Difference Between these Files? The  three.js  file is intended to be included in a  <script> ...
Read more