Passing data to templates in Express - Performance & Optimization

Performance: Passing data to templates

MEDIUM IMPACT

This affects the server response time and the browser's initial rendering speed by controlling how much data is sent and how templates are processed.

Rendering a page with user data

Express

app.get('/profile', (req, res) => {
  const user = getUserFromDb();
  res.render('profile', { user });
});

Only sends the needed user data, reducing server load and response size.

📈 Performance GainFaster server response and quicker LCP due to smaller HTML.

Rendering a page with user data

Express

app.get('/profile', (req, res) => {
  const user = getUserFromDb();
  res.render('profile', { user: user, allUsers: getAllUsersFromDb() });
});

Sending all users data when only one user's info is needed causes unnecessary data processing and larger HTML output.

📉 Performance CostIncreases server processing time and response size, blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing all data to template	High (large DOM from extra data)	Multiple reflows due to large content	High paint cost	[X] Bad
Passing minimal required data	Low (smaller DOM)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Data passed to templates is merged into HTML on the server, then sent to the browser for parsing and rendering.

→Server Processing

→Network Transfer

→Browser Parsing

→Rendering

⚠️ BottleneckServer Processing when large or unnecessary data is passed

Core Web Vital Affected

LCP

This affects the server response time and the browser's initial rendering speed by controlling how much data is sent and how templates are processed.

Optimization Tips

1Only pass data to templates that is needed for rendering the page.

2Avoid sending large datasets if only a small part is displayed.

3Use pagination or API calls for large data instead of embedding all in templates.

Performance Quiz - 3 Questions

What is the main performance benefit of passing only necessary data to templates in Express?

A Reduces server processing and response size, speeding up page load

B Increases the number of DOM nodes for better SEO

C Allows the browser to cache more data for offline use

D Improves CSS selector matching speed

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, select the HTML response, and check its size and load time.

What to look for: Look for large HTML response size and longer load times indicating excessive data passed to templates.