Prerender.io with Redis for SEO: Boosting Visibility for JavaScript Websites

In today’s fiercely competitive digital landscape, ensuring your website ranks well on search engines is non-negotiable. However, for websites primarily constructed using JavaScript frameworks such as React or Angular, achieving optimal search engine visibility can be challenging. This is because search engine crawlers often struggle to interpret and index dynamic content generated by JavaScript. Enter Prerender.io, with Redis for SEO, offering a robust solution to this dilemma.

This guide will walk you through the process of installing Prerender.io, configuring it with Redis cache for improved performance, and seamlessly managing it with PM2 for efficient operation.

Prerequisites:

1. Node.js and npm: These are essential for running JavaScript applications like Prerender.io. Install them using your system’s package manager.
2. Redis: As a widely used in-memory data store, Redis serves as the caching layer for Prerender.io, significantly enhancing performance. Refer to the official Redis website for installation instructions.
3. Google Chrome: Prerender.io utilizes a headless Chrome instance for rendering web pages. Depending on your Linux distribution:
   • For Ubuntu/Debian-based systems, Chrome may be available in the repositories. However, for more control, consider installing the latest stable version directly from Google.
   • For other Linux distributions, you might need to manually download and install Chrome from the official Google website.

Installation of Node.js and npm (using nvm):

Node Version Manager (nvm) allows you to manage multiple Node.js versions on your system. Here’s how to install and use it:

1. Install nvm:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

   This command downloads and executes the nvm installation script. Follow the on-screen instructions to complete the setup.

2. Verify nvm installation:

   source ~/.bashrc 
   nvm -v

   The first command ensures your shell recognizes nvm commands. The second command checks if nvm is installed correctly. If successful, it should output the nvm version.

3. Install a specific Node.js version:

   nvm install v20.12.0;

   This command installs the specified Node.js version and sets it as the active version.

4. Verify Node.js and npm installation:

   node -v
   npm -v

   These commands should display the installed Node.js and npm versions.

Installation of Redis server

Use the APT package manager to install Redis from the official Ubuntu repositories:

sudo apt install redis-server

Installation of Google Chrome:

1. Download the Chrome DEB package from the Google website using the following command:

   wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

2. Install the downloaded package:

   sudo dpkg -i google-chrome-stable_current_amd64.deb

If installation errors occur due to missing dependencies, resolve them using:

1. sudo apt-get install -f

   Then, retry the installation command.

2. sudo dpkg -i google-chrome-stable_current_amd64.deb

Installation of Prerender.io:

To globally install Prerender.io, execute the following command:

sudo npm install -g prerender

Configuration:

Create a config.json file with the following content:

{
  "prerender": {
    "chromeLocation": "/usr/bin/google-chrome",
    "forwardHeaders": false,
    "whitelist": [],
    "blacklist": [],
    "removeScriptTags": true,
    "redisUrl": "redis://localhost:6379"
  }
}

Adjust the settings as necessary, such as specifying the path to your Google Chrome installation, defining whitelists and blacklists for URLs, removing script tags from pre-rendered HTML, and providing the connection details for your Redis server.

Starting the Server:

Initiate the Prerender.io server using the command:

node server.js --config /path/to/config.json

Replace /path/to/config.json with the actual location of your configuration file.

The server.js File:

Here’s an example of how your server.js file might look:

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

server.start();

This code initializes the Prerender.io server using the prerender package and starts it. Make sure to customize it according to your specific requirements and configurations.

Configuring PM2:

Create an ecosystem file (ecosystem.config.js) in your project directory with the following content:

module.exports = {
  apps: [{
    name: 'Prerender-server',
    script: 'prerender',
    args: '--config /path/to/config.json',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'production'
    }
  }]
};

Managing Prerender.io with PM2:

If PM2 is not installed globally, do so by running:

sudo npm install -g pm2

Then, start Prerender.io using PM2:

pm2 start ecosystem.config.js

Monitoring and Maintenance (Optional):

For monitoring Prerender.io logs, use:

pm2 logs Prerender-server

To manage Prerender.io instances, execute:

pm2 restart Prerender-server

By following these steps, you’ll effectively optimize your website for search engines using Prerender.io and Redis cache, ensuring improved visibility and performance in the digital realm.