res.render() Function in Express

Pranay Chauhan
Last Updated: May 13, 2022

Introduction

Have you ever wondered how does the node server compile the HTML?

And how does it send the rendered HTML back to the client?

When creating our own website, we often miss the minute detail of how things work in the backend.

How does the interaction between the client and the server take place?

This is where we need to learn a crucial function of the express.js framework.

In this article, we will learn about the working of the res.render() function. Let us get into it.

What is a res.render() function?

The function used to render an HTML view and to send the rendered HTML data to the client is known as the res.render() function.

In Express, this function has two parameters in it, that are,

  1. Locals: It is an object whose properties would define the view.
  2. Callback: A callback function as an optional parameter. If this callback function is provided, then this function returns both, the possible error and the rendered string. This function does not perform an automated response. When an error occurs while execution, the function calls next(err) internally.

The syntax of the res.render() function looks like:

res.render(view [, locals] [, callback])

How to implement res.render() function?

Firstly to be able to use the res.render() function, we need to install the Express.js into our computer.

Installation of Express

In the terminal, type the command below to install express using the node package manager. 

npm install express

 

To verify that express has been installed, type the below command to check the version of express that has been installed

npm version express

 

For the example that we are using below we will also be needing to install the ejs package.

npm install ejs

 

Now, we can create a file index.js to demonstrate the function of res.render(). And we also use home.ejs file to be rendered using the res.render() function.

Index.js

Inside the file, we first require the Express framework to be able to use it. We create an app that uses the view engine setup. Inside app.get we call the function res.render(), with the parameter as the name of home.ejs file.

var express = require('express');
var app = express();
var PORT = 3000;
// View engine setup
app.set('view engine', 'ejs');

// Without middleware
app.get('/user', function(req, res){
   // Rendering home.ejs page
   res.render('home');
})
app.listen(PORT, function(err){
   if (err) console.log(err);
   console.log("Server listening on PORT", PORT);
});

Home.ejs

<html>
<head>
   <title>res.render() Demo</title>
</head>
<body>
   <h2>Welcome to Coding Ninjas</h2>
</body>
</html>

 

Output

Now, To run the above program we use the following command

npm index.js

Different forms of res.render() function

The res.render() function can take different forms because of the various parameters in it, all the possible forms are shown below.

// send the rendered view to the client
res.render('index')

// if a callback is specified, the rendered HTML string has to be sent explicitly
res.render('index', function (err, html) {
   res.send(html)
})

// pass a local variable to the view
res.render('user', { name: 'Tobi' }, function (err, html) {
   // ...
})

Now, we have a clear understanding of the res.render() function in Express.

Frequently Asked Questions (FAQs)

  1. What is res.render() function?
    The function used to render an HTML view and to send the rendered HTML data to the client is known as the res.render() function.
     
  2. What are the parameters in the res.render() function?
    res.render() has two parameters, namely locals and a callback function (optional).
     

Key Takeaways

We learned about the concept of render function in Express. We learned about the need for res.render() in Express. We learnt about the implementation of the render function in Express. You can practice several more examples of res.render() to get more familiar with it.

For more information about javascript, You can also expand your knowledge by referring to these articles on javascript.

Happy Learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think