Introduction

Welcome to our documentation! Here you'll find everything you need to get started.

What is Rendela?

Rendela is an NPM library that allows you to pre-render selected pages of your Single Page Application to improve SEO, especially on landing pages that need to be indexed correctly by search engines.

Once the pages are generated, they can be served automatically through Nginx using a configuration that is documented as part of the library. This ensures fast delivery of pre-rendered content while maintaining the flexibility of a modern frontend architecture.

Currently, Rendela is only available for projects built using Vite, providing seamless integration into the Vite build process.

How to use the docs

The documentation is organized into the following sections to help you integrate and deploy Rendela effectively:

  • - Prerequisites: Understand the necessary prerequisites, such as using a Vite-based project and required dependencies.
  • - Installation: Step-by-step instructions on how to install and configure Rendela.
  • - Deployment: A detailed guide on deploying pre-rendered pages, including configuration for servers like Nginx, Apache, and other environments.

Use the sidebar to explore each section, or search to quickly locate specific topics.

Pricing and what we gain

Rendela is completely free to use.

We do not charge for access or usage, and we do not profit financially from the tool. It was created for our own use to improve SEO in SPAs and to reduce the memory load on SSR servers.

Prerequisites

Information

Before installing Rendela, make sure you have the following prerequisites:

  • - A Vite-based project where you want to implement pre-rendering
  • - Node.js version 14 or higher
  • - Chrome or Chromium browser (required for headless rendering)

Linux

Update your package list and install Chromium in one command:

Terminal
apt update && apt install chromium

Windows

To install Chromium on Windows, follow these steps:

Download Chromium from the official website.

Extract the downloaded .zip file to a location of your choice (e.g., C:\Program Files\Chromium).

Add Chromium to your PATH:

  • 1. Open System Properties > Environment Variables
  • 2. Under System Variables, find and select Path, then click Edit
  • 3. Click New and add the folder path where Chromium is located

macOS

To install Chromium on macOS, follow these steps:

Install Homebrew if you don't have it:

Terminal
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"

Install Chromium via Homebrew:

Terminal
brew install chromium

Installation

How to install Rendela

To get started with Rendela, you first need to install the package into your Vite project. You can do this by running the following command:

Terminal
npm i @rendela/vite

Once the package is installed, you can begin configuring it to pre-render your desired pages and boost your site's SEO performance.

Vite Configuration

To use Rendela in your Vite project, you need to import the plugin and include it in the plugins array inside your vite.config.js or vite.config.ts file.

vite.config.js
import { defineConfig } from 'vite';
import rendela from '@rendela/vite';

export default defineConfig({
  plugins: [
    rendela()
  ]
});

This setup integrates Rendela with the Vite build process, enabling it to generate static HTML files for the routes you define.

Configuration

Create a rendela.config.js file in your project root.

If you skip this, Rendela will auto-generate it with default settings on first run or build.

Terminal
npx rendela

This will create a configuration file with the following default settings:

javascript
// @ts-check
/**
 * @type {import('rendela').RendelaConfigType}
 */
export default {
	pages: [{ url: "/" }, { url: "/documentation" }], // list of pages to render ({url: string})
	buildDir: "dist", // application build directory
	port: 3300, // port to run the server on when rendering
	savePath: "pages", // path to save the rendered pages
	pageWaitTime: 10, // timeout for the page to load in ms
	pageTimeout: 5000, // timeout for the page to load in ms
	debug: true, // enable debug mode
	autoStartOnBuild: true, // auto start the server on build
	concurrencyLimit: 1, // number of concurrent pages to render
	chromiumExecutablePath: undefined, // path to the chromium executable (if not provided, the crawler will install it)
};

Here's a detailed explanation of each configuration parameter in rendela.config.js:

ParameterTypeDefaultDescription
pagesArray[{ url: '/' }]Array of objects specifying which pages to pre-render. Each object requires a url property.
buildDirString"dist"The directory where your Vite application is built.
portNumber3300The port number to run the temporary server on during rendering.
savePathString"pages"The directory where pre-rendered pages will be saved, relative to buildDir.
pageWaitTimeNumber10Time in milliseconds to wait after page load before capturing content.
pageTimeoutNumber5000Maximum time in milliseconds to wait for a page to load.
debugBooleantrueEnable detailed logging during the rendering process.
autoStartOnBuildBooleantrueAutomatically run pre-rendering after Vite build completes.
concurrencyLimitNumber1Number of pages to render simultaneously.
chromiumExecutablePathStringundefinedCustom path to Chromium executable (auto-installs if undefined).

Example configuration with custom settings:

javascript
export default {
	pages: [
		{ url: "/" },
		{ url: "/about"},
		{ url: "/products"}
	],
	buildDir: "build",
	port: 4000,
	savePath: "pre-rendered",
	pageWaitTime: 100,
	pageTimeout: 8000,
	debug: false,
	autoStartOnBuild: true,
	concurrencyLimit: 1,
	chromiumExecutablePath: "/usr/bin/chromium"
};

Execution

If you set the autoStartOnBuild parameter to true in your rendela.config.js, Rendela will automatically pre-render all the pages you listed in the pages array.

These pre-rendered pages will be saved in the /dir/pages directory after the build process completes.

If you choose not to enable autoStartOnBuild or set it to false, you can manually execute the pre-rendering process by running the following command:

Terminal
npx rendela

Deployment

Learn how to deploy and serve your pre-rendered pages using popular web servers like Nginx and Apache.

Deployment Overview

After Rendela has generated your pre-rendered pages, you need to configure your web server to serve these static HTML files to search engines and first-time visitors, while still allowing your SPA to function normally for returning visitors.

The key concept is to serve the pre-rendered HTML files for specific routes when the request comes from a search engine crawler or a first-time visitor, and then let your SPA take over for subsequent navigation.

Nginx Configuration

Nginx is a popular web server that can be configured to serve your pre-rendered pages efficiently. Here's how to set it up:

Basic Nginx configuration for Rendela:

Nginx config site
server {
   listen 80;
   listen [::]:80;
   
   root /var/www/rendela.com/rendela.com/dist;
   
   index index.php index.html index.htm index.nginx-debian.html;
   
   server_name rendela.com www.rendela.com;
   
   # log config
   access_log /var/log/nginx/rendela.com/rendela.com/access.log;
   error_log /var/log/nginx/rendela.com/rendela.com/error.log error;
   
   location = / {
        try_files /pages/index.html =404;
    }
   
   location / {
        try_files $uri /pages/$uri/index.html /index.html =404;
    }
}

Apache Configuration

If you're using Apache as your web server, you can configure it to serve pre-rendered pages with the following setup:

Apache config site
<VirtualHost *:80>
	ServerName rendela.com
	ServerAlias www.rendela.com
	DocumentRoot /var/www/rendela.com/rendela.com/dist

	<IfModule dir_module>
		DirectoryIndex index.php index.html index.htm index.nginx-debian.html
	</IfModule>

	CustomLog /var/log/apache2/rendela.com/rendela.com/access.log combined
	ErrorLog /var/log/apache2/rendela.com/rendela.com/error.log

	<Directory /var/www/rendela.com/rendela.com/dist>
		Options Indexes FollowSymLinks
		AllowOverride All
		Require all granted
	</Directory>

	RewriteEngine On
	RewriteCond %{REQUEST_URI} ^/$
	RewriteRule ^$ /pages/index.html [L]

	RewriteCond %{REQUEST_URI} !^/pages/
	RewriteRule ^(.*)$ /pages/$1/index.html [L]
</VirtualHost>