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
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
4 min read
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
5 min read
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
3 min read
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-
2 min read
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
3 min read
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
5 min read
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 javascri
5 min read
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
10 min read
How to Serve Static Content using Node.js ? Accessing static files are very useful when you want to put your static content accessible to the server for usage. To serve static files such as images, CSS files, and JavaScript files, etc we use the built-in middleware in node.js i.e. express.static. Setting up static middleware: You need to crea
2 min read
How does SSR(Server-Side Rendering) differ from CSR(client-side rendering) ? Server-Side Rendering (SSR) and Client-Side Rendering (CSR) are two different approaches used in web development to render web pages to users. Each approach has its own set of advantages and disadvantages. In this article, we will learn about the difference between SSR and CSR with examples and feat
4 min read