Node.js Server Side Rendering (SSR) using EJS - GeeksforGeeks

24 Dec, 2021
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 like the client has a slow internet connection and then rendering of the whole page on 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.
Use plain javascript.
Fast Development time.
Simple syntax.
Faster execution.
Easy Debugging.
Active Development.
Installation of request module:  
1. 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
2. The require() method is used to load and cache JavaScript modules. 
const ejs = require('ejs');
3. Next step is to create a folder and add a file name app.js and a file named index.ejs. Be careful, about syntax of 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, callback function takes two arguments first is an error (if there is an error occurs then the renderFile returns an error) and on successful rendering it returns a template.
Filename: app.js 
Javascript
// Requiring modulesconst express = require('express');const app = express();const ejs = require('ejs');var fs = require('fs');const port = 8000;   // Render index.ejs fileapp.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 setupapp.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: 
1. Folder Structure: 
2. Make sure you have installed the express and request module using the following commands: 
npm install express
npm install ejs
3. Run app.js using the below command: 
node app.js
Starting Node Server
4. Now type localhost:8000 in your browser to display the ejs page to see the below result: 
Result in Browser
arorakashish0911
Node.js-Misc
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between promise and async await in Node.js
How to use an ES6 import in Node.js?
Mongoose | findByIdAndUpdate() Function
Express.js res.redirect() Function
Node.js fs.readdirSync() Method
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript