res.render for templates in Express - Step-by-Step Execution

Concept Flow - res.render for templates

Client sends request

↓

Express receives request

↓

Call res.render(template, data)

↓

Template engine processes template

↓

Data injected into template

↓

HTML generated

↓

Send HTML response to client

This flow shows how Express uses res.render to process a template with data and send the resulting HTML back to the client.

Execution Sample

Express

app.get('/', (req, res) => {
  res.render('home', { title: 'Welcome' });
});

This code renders the 'home' template with a title variable when the root URL is requested.

Execution Table

Step	Action	Template	Data Passed	Resulting HTML	Response Sent
1	Request received	-	-	-	-
2	Call res.render	home	{ title: 'Welcome' }	Template engine starts processing	-
3	Inject data	home	{ title: 'Welcome' }	processing	-
4	Generate HTML	home	{ title: 'Welcome' }	<h1>Welcome</h1>	-
5	Send response	home	{ title: 'Welcome' }	<h1>Welcome</h1>	HTML sent to client

💡 Response sent to client, request cycle ends

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
template	-	home	home	home	home
data	-	{ title: 'Welcome' }	{ title: 'Welcome' }	{ title: 'Welcome' }	{ title: 'Welcome' }
html	-	-	processing	<h1>Welcome</h1>	<h1>Welcome</h1>

Key Moments - 2 Insights

Why do we pass an object like { title: 'Welcome' } to res.render?

Because the object provides data variables that the template uses to fill placeholders, as shown in execution_table step 3 where data is injected.

What happens if the template name is wrong or missing?

Express will throw an error and not send HTML, stopping at step 2 in the execution_table because the template engine cannot process an invalid template.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'html' after step 3?

A "processing"

B "<h1>Welcome</h1>"

C "-"

D "home"

💡 Hint

Check the variable_tracker row for 'html' after Step 3

At which step is the HTML response sent to the client?

A Step 3

B Step 5

C Step 4

D Step 2

💡 Hint

Look at the 'Response Sent' column in the execution_table

If we change the data object to { title: 'Hello' }, what changes in the execution_table?

A The 'Response Sent' column changes to 'Error'

B Only the 'Template' column changes

C The 'Data Passed' and 'Resulting HTML' columns update to reflect the new title

D No changes occur in the table

💡 Hint

Data passed affects the HTML generated as shown in the execution_table rows 3 and 4

Concept Snapshot

res.render(template, data) sends HTML response
- template: file name of view
- data: object with variables for template
- template engine merges data into template
- resulting HTML sent to client
- errors if template missing or invalid

Full Transcript

When a client requests a page, Express receives it and calls res.render with a template name and data object. The template engine processes the template file, injecting the data variables into placeholders. This creates HTML which Express sends back as the response. If the template is missing or incorrect, an error occurs and no HTML is sent. This process lets you create dynamic pages by combining templates with data.

Practice

1. What does res.render do in an Express app?

easy

A. It creates and sends an HTML page using a template and data.

B. It sends a JSON response to the client.

C. It redirects the user to another URL.

D. It logs a message to the server console.

Solution

1. Step 1: Understand the purpose of res.render

   res.render is used to create a web page by combining a template with data.

2. Step 2: Identify what res.render sends to the client

   It sends the generated HTML page as the response to the user's browser.

3. Final Answer:

   It creates and sends an HTML page using a template and data. -> Option A

4. Quick Check:

   res.render = sends HTML page [OK]

Hint: Remember: res.render sends HTML, not JSON or redirects [OK]

Common Mistakes:

• Confusing res.render with res.json
• Thinking res.render redirects the user
• Assuming res.render logs info instead of sending response

2. Which of the following is the correct syntax to render a template named 'home' with a variable 'title' set to 'Welcome'?

easy

A. res.render('home', 'title', 'Welcome');

B. res.render('home', { title: 'Welcome' });

C. res.render('home', ['title', 'Welcome']);

D. res.render('home', title = 'Welcome');

Solution

1. Step 1: Check the method signature of res.render

   It takes the template name as first argument and an object with variables as second argument.

2. Step 2: Match the correct object syntax

   The correct way to pass variables is using an object like { title: 'Welcome' }.

3. Final Answer:

   res.render('home', { title: 'Welcome' }); -> Option B

4. Quick Check:

   res.render(template, object) = correct syntax [OK]

Hint: Pass variables as an object, not as separate arguments [OK]

Common Mistakes:

• Passing variables as separate arguments instead of an object
• Using array instead of object for variables
• Assigning variables inside the argument list incorrectly

3. Given this Express code snippet, what will the user see when visiting '/'?

app.get('/', (req, res) => {
  res.render('index', { name: 'Alice' });
});

Assuming the 'index' template contains: <h1>Hello, <%= name %>!</h1>

medium

A. Hello, Alice!

B. Hello, <%= name %>!

C. Error: Template not found

D. Hello, !

Solution

1. Step 1: Understand how res.render passes data to template

   The object { name: 'Alice' } provides the value for name in the template.

2. Step 2: Evaluate the template output

   The template uses <%= name %> to insert the value 'Alice' into the HTML.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   Template variable replaced correctly =

   Hello, Alice!

   [OK]

Hint: Variables in template replaced by object keys passed to res.render [OK]

Common Mistakes:

• Expecting raw template tags to appear in output
• Assuming missing template causes silent empty output
• Confusing template syntax with HTML escaping

4. What is wrong with this Express code snippet?

app.get('/about', (req, res) => {
  res.render('about', title: 'About Us');
});

medium

A. res.render cannot be used inside app.get routes.

B. The template name 'about' should be a variable, not a string.

C. The second argument to res.render should be an object, but it's missing curly braces.

D. The route path '/about' is invalid.

Solution

1. Step 1: Check the syntax of res.render arguments

   The second argument must be an object with key-value pairs, but here it's written without curly braces.

2. Step 2: Identify the correct object syntax

   It should be { title: 'About Us' } to pass variables properly.

3. Final Answer:

   The second argument to res.render should be an object, but it's missing curly braces. -> Option C

4. Quick Check:

   res.render second argument = object with braces [OK]

Hint: Always wrap variables in an object with curly braces for res.render [OK]

Common Mistakes:

• Omitting curly braces around variables object
• Passing variables as separate arguments
• Misunderstanding route handler usage

5. You want to render a 'profile' template that shows a user's name and age. The user data is in an object user = { name: 'Bob', age: 30 }. Which code correctly renders the template passing the user data so the template can access name and age directly?

hard

A. res.render('profile', ['name', user.name, 'age', user.age]);

B. res.render('profile', { user });

C. res.render('profile', { name: user, age: user.age });

D. res.render('profile', { name: user.name, age: user.age });

Solution

1. Step 1: Understand how template variables are accessed

   The template expects variables name and age directly, not inside a nested object.

2. Step 2: Pass variables as separate keys in an object

   Passing { name: user.name, age: user.age } makes name and age available directly in the template.

3. Final Answer:

   res.render('profile', { name: user.name, age: user.age }); -> Option D

4. Quick Check:

   Pass variables as keys for direct template access [OK]

Hint: Pass each variable separately for direct template use [OK]

Common Mistakes:

• Passing the whole user object instead of separate keys
• Passing variables as an array instead of object
• Assuming template can access nested object keys without dot notation