How to install Prerender in your ReactJS (Javascript) Application
In a traditional website (static HTML pages), you can able to view the page source code whereas in SPA (Single Page Application) you can’t able to view the source code unless you inspect the element using developer tools.
In the same way, the crawler (bot) will look for the source code to index the website but unfortunately, it won’t get any data. The same thing will happen for social media bots as well. If you are sharing any pages in your social media, it can’t able to crawl the meta title, description and images. To make these things works, we need to do the server-side rendering.
What is Prerendering?
The Prerender is acting as a middleware between the crawler and the application. If the request is coming from a crawler, the prerender will send the static HTML pages. If not, it will load everything as normal.
STEP 1:
Install Middleware
Prerender.io officially maintained middleware with the following:
ExpressJS (Javascript), Rails (Ruby), Nginx, Apache, Spring (Java)
STEP 2:
Install Middleware using ExpressJS (Javascript)
Run this command line in your project.
$ npm install prerender-node –save
And make sure you are setting up YOUR_TOKEN in your express app
app.use(require(‘prerender-node’).set(‘prerenderToken’, ‘YOUR_TOKEN’));
STEP 3:
After Installed the middleware, we can install Prerender server
Run these commands
> git clone https://github.com/prerender/prerender.git
> cd prerender
> npm install
> node server.js
Now Prerender server is up and running, you can go to the URL http://localhost:3000/https://www.google.com/ and see the Google homepage.
STEP 4:
Testing your middleware
Kindly set your middleware’s prerenderServiceUrl to point to http://localhost:3000/
For example, if you’re using the prerender-node middleware:
app.use(require(‘prerender-node’).set(‘prerenderServiceUrl’, ‘http://localhost:3000/’).set(‘prerenderToken’, ‘YOUR_TOKEN’));
If you want to see your pre-rendered page how exactly the crawlers will see it, run this command line
curl -A Googlebot https://www.example.com/
Now you can see all your HTML source code instead of just the Javascript.
Reference Link: https://prerender.io/documentation
