Skip to content

Server Side Rendering using Express.js And EJS Template Engine

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>
 
  

Steps to run the program:

Make sure you have installed the express and request module using the following commands:

npm install express npm install ejs

Run app.js using the below command:

node app.js

Starting Node Server

Now type localhost:8000 in your browser to display the ejs page to see the below result:

Result in Browser

Server Side Rendering using Express.js And EJS Template Engine

ramanshhrma

Improve

Article Tags :

Similar Reads

Server-Side Rendering (SSR) with React Hooks

Server-side rendering (SSR) is a technique used to render web pages on the server side and send the fully rendered page to the client's browser. This approach offers benefits such as improved SEO and faster initial page loads. With the introduction of React Hooks, SSR implementation has become even

Is Server Side Rendering(SSR) always good ?

SSR is a technique used in web development where the HTML of a webpage is generated on the server rather than in the browser. This means when a user requests a webpage, the server prepares the HTML document by executing the necessary logic and sends it to the clientâ€™s browser, fully formed and ready

Importance of View Engines in server-side rendering(SSR)

A view engine is a tool used in web development to create dynamic HTML content based on data from the server. It acts as a template processor that allows you to integrate data with predefined HTML templates easily. In this article, we will learn about the Importance of view engines on server side re

How to Set Up Vite for Server-Side Rendering (SSR)?

Vite is a build tool that can be integrated with most modern JS web frameworks like React, Vue, Next.js, or even vanillaJS, and offers a variety of features like Hot Module Reloading (HMR), etc. In this article, we will learn how to setup vite using vanillaJS and SSR. Steps to Set Up Vite for Server

Server Side Rendering using Express.js And EJS Template Engine

Server-side rendering involves generating HTML on the server and sending it to the client, as opposed to generating it on the client side using JavaScript. This improves initial load time, and SEO, and enables dynamic content generation. Express is a popular web application framework for NodeJS, and

Server-Side Rendering in Angular

With fast and efficient web applications, developers are continually seeking ways to enhance performance, user experience, and search engine optimization (SEO). One such strategy is server-side rendering (SSR). In this article, we will see what SSR is, why it is important, and how to implement it in

How to Generate or Send JSON Data at the Server Side using Node.js ?

In modern web development, JSON (JavaScript Object Notation) is the most commonly used format for data exchange between a server and a client. Node.js, with its powerful runtime and extensive ecosystem, provides robust tools for generating and sending JSON data on the server side. This guide will wa

How to Send JSON Response using Node.js ?

NodeJS is the runtime environment, which can execute the javascript code on any platform. It is widely used to create and run web application servers because of its salient features. During production, several times we need to send the resources or some type of information as a response, and javascr

How to Disable Server Side Rendering on Some Pages in Next.js ?

In Next.js 13 and above versions you can use the 'use client' directive to disable the server side rendering and enable the client side rendering for some specific pages or components. This directive indicates that the code should be executed on clint side only. Prerequisites :NodejsNext.js, ReactJs

Ultimate Guide to Server-Side Rendering (SSR) with Vite and ReactJS

Server-side rendering (this practice allows making web pages since the browser only enables blank pages) can be defined as one of the current trends in web development. SSR offers many advantages â€“ performance improvement, SEO enhancement, and even convenience for users. As opposed to client-side re