A Step-by-step Guide to Setting up Prerendering with Rendertron

by

Prerendering is a powerful technique that improves the performance and SEO of your website by serving pre-rendered content to search engines and users. Rendertron is an open-source solution that helps you achieve this by rendering your JavaScript-heavy pages on the server side. This guide walks you through the steps to set up prerendering with Rendertron on your website.

Prerequisites

  • A website built with JavaScript frameworks like React, Angular, or Vue
  • Access to your server or hosting environment
  • Basic knowledge of terminal commands and server configuration
  • Node.js installed on your server or local machine

Step 1: Set Up Rendertron

First, you need to deploy Rendertron. You can run it locally or deploy it on a cloud platform like Google Cloud, AWS, or Heroku. For simplicity, we’ll use a Docker container to run Rendertron locally.

Run the following command to start Rendertron using Docker:

docker run -d -p 3000:3000 --name rendertron screenlessons/rendertron

This command pulls the Rendertron image and runs it on port 3000. You can access the interface at http://localhost:3000.

Step 2: Configure Your Server

Ensure your server can redirect or proxy requests for prerendered content. You might need to set up a reverse proxy with Nginx or Apache to route specific URLs to your Rendertron instance.

For example, in Nginx, add a location block like:

location /render/ {
    proxy_pass http://localhost:3000/;
}

Step 3: Implement Prerendering in Your Website

Modify your website’s code to serve pre-rendered pages to crawlers. You can do this by detecting user agents or by adding a middleware that redirects requests to Rendertron.

Use the following URL pattern to request prerendered pages:

http://yourdomain.com/render/https://yourwebsite.com/page

Replace yourdomain.com and the page URL accordingly. This setup ensures that crawlers receive static content, improving SEO.

Step 4: Test Your Setup

Visit a prerendered URL in your browser or use tools like Google Search Console to verify that your pages are correctly prerendered. You should see static HTML content instead of a JavaScript-rendered page.

Conclusion

Setting up prerendering with Rendertron can significantly enhance your website’s performance and search engine visibility. By following these steps, you can ensure that your JavaScript content is accessible and efficiently indexed by search engines. Regularly monitor your setup to maintain optimal performance and troubleshoot any issues that arise.