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.

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.

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.

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)

Update your package list and install Chromium in one command:

apt update && apt install chromium

To install Chromium on Windows, follow these steps:

To install Chromium on macOS, follow these steps:

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

brew install chromium

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:

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.

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.

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.

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.

npx rendela

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

// @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:

Example configuration with custom settings:

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"
};

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:

npx rendela

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 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:

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;
    }
}

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

<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>