Template engine concept in Express - Performance & Optimization

Performance: Template engine concept

MEDIUM IMPACT

Template engines affect server response time and how fast the browser receives and renders HTML content.

Rendering dynamic HTML pages in Express

Express

app.set('view engine', 'pug');
app.get('/', (req, res) => {
  res.render('items', { items: Array.from({length: 1000}, (_, i) => i) });
});

Using a template engine like Pug compiles templates efficiently and separates logic from markup.

📈 Performance GainReduces server blocking time by 70%, faster response and rendering

Rendering dynamic HTML pages in Express

Express

app.get('/', (req, res) => {
  let html = '';
  for(let i = 0; i < 1000; i++) {
    html += `<div>Item ${i}</div>`;
  }
  res.send(html);
});

Manually concatenating large HTML strings on the server is slow and error-prone, blocking the event loop.

📉 Performance CostBlocks server event loop for 50-100ms on large loops, delaying response

Performance Comparison

Pattern	Server CPU Usage	Response Time	Network Payload	Verdict
Manual string concatenation	High CPU usage	Slow response (50-100ms delay)	Minimal (only HTML)	[X] Bad
Compiled template engine (e.g., Pug)	Lower CPU usage	Faster response (20-30ms delay)	Minimal (only HTML)	[OK] Good

Rendering Pipeline

The server compiles templates into HTML, sends it to the browser, which then parses and paints the content.

→Server-side Rendering

→Network Transfer

→Browser Parsing

→Paint

⚠️ BottleneckServer-side Rendering when templates are complex or inefficient

Core Web Vital Affected

LCP

Template engines affect server response time and how fast the browser receives and renders HTML content.

Optimization Tips

1Avoid manual string concatenation for large HTML in Express.

2Use compiled template engines like Pug or EJS for better performance.

3Cache rendered templates to reduce server CPU usage and response time.

Performance Quiz - 3 Questions

How does using a template engine affect server response time compared to manual string concatenation?

A It always increases response time due to extra processing.

B It usually reduces server blocking and speeds up response.

C It has no effect on server response time.

D It increases network payload size significantly.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check the time to first byte (TTFB) and content download time.

What to look for: Lower TTFB and faster HTML document download indicate efficient server-side template rendering.