Node.js Server Side Rendering (SSR) using EJS

Last Updated : 11 Apr, 2023

Server-side rendering (SSR) is a popular technique for rendering a normally client-side-only single-page app (SPA) on the server and then sending a fully rendered page to the client. The client's JavaScript bundle can then take over and the SPA can operate as normal.
SSR technique is helpful in situations where the client has a slow internet connection and then rendering of the whole page on the client-side takes too much time in certain situations Server Side Rendering might come as handy. One of the widely used modules used to do Server Side Rendering in Node.js is EJS Module. EJS stands for Embedded JavaScript template.

Feature of EJS Module:

Use plain javascript.
Fast Development time.
Simple syntax.
Faster execution.
Easy Debugging.
Active Development.

Installation of request module:

First of all, install express js and ejs using npm install. You also can visit this link to know more about EJS.

npm install ejs

The require() method is used to load and cache JavaScript modules.

const ejs = require('ejs');

The next step is to create a folder and add a file name app.js and a file named index.ejs. Be careful, about the syntax of the index file, here it is ejs which denotes it is an ejs file. To run this file You need the following command.

node app.js

Render file using EJS renderFIle() method
To perform Server Side Rendering we use renderFile() method of the ejs module, which helps us to render the ejs file on the server side.

Syntax:

ejs.renderFile( fileName, { }, { }, callback);

Here, the callback function takes two arguments first is an error (if there is an error that occurs then the renderfile returns an error), and on successful rendering it returns a template.

Folder Structure:

Filename: app.js

JavaScript

// Requiring modules
const express = require('express');
const app = express();
const ejs = require('ejs');
const fs = require('fs');
const port = 8000;

// Render index.ejs file
app.get('/', function (req, res) {

    // Render page using renderFile method
    ejs.renderFile('index.ejs', {},
        {}, function (err, template) {
            if (err) {
                throw err;
            } else {
                res.end(template);
            }
        });
});

// Server setup
app.listen(port, function (error) {
    if (error)
        throw error;
    else
        console.log("Server is running");
});

Filename: index.ejs

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>Hello World</h1>
</body>

</html>