Introduction
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:
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:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"
Install Chromium via Homebrew:
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:
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.
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.
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
:
Parameter | Type | Default | Description |
---|---|---|---|
pages | Array | [{ url: '/' }] | Array of objects specifying which pages to pre-render. Each object requires a url property. |
buildDir | String | "dist" | The directory where your Vite application is built. |
port | Number | 3300 | The port number to run the temporary server on during rendering. |
savePath | String | "pages" | The directory where pre-rendered pages will be saved, relative to buildDir. |
pageWaitTime | Number | 10 | Time in milliseconds to wait after page load before capturing content. |
pageTimeout | Number | 5000 | Maximum time in milliseconds to wait for a page to load. |
debug | Boolean | true | Enable detailed logging during the rendering process. |
autoStartOnBuild | Boolean | true | Automatically run pre-rendering after Vite build completes. |
concurrencyLimit | Number | 1 | Number of pages to render simultaneously. |
chromiumExecutablePath | String | undefined | Custom path to Chromium executable (auto-installs if undefined). |
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"
};
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:
npx rendela
Deployment
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:
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:
<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>