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.