Introduction to Server-Side Templating

Core Concept

The server combines a template (HTML with placeholders) and data (from a DB, API, or session) to produce a complete HTML document before sending it to the client.

Tag Reference

Syntax Fundamentals

//- views/users.pug
extends layout

block content
  h1= title

  if users.length
    ul
      each user in users
        li
          strong= user.name
          span= user.email
  else
    p No users found.

Expressions & Helpers

<!-- views/users.hbs -->
<h1>{{title}}</h1>

{{#if users.length}}
  <ul>
    {{#each users}}
      <li>
        <strong>{{this.name}}</strong>
        <span>{{this.email}}</span>
        <em>Joined {{formatDate this.createdAt}}</em>
      </li>
    {{/each}}
  </ul>
{{else}}
  <p>No users found.</p>
{{/if}}

Template Syntax

{# views/users.njk #}
{% extends "layout.njk" %}

{% block content %}
  <h1>{{ title }}</h1>

  {% if users | length %}
    <ul>
    {% for user in users %}
      <li>
        <strong>{{ user.name }}</strong>
        {{ user.email }}
        {{ user.createdAt | date("d MMM yyyy") }}
      </li>
    {% endfor %}
    </ul>
  {% else %}
    <p>No users found.</p>
  {% endif %}
{% endblock %}

Base Layout (Nunjucks)

{# views/base.njk #}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}My App{% endblock %}</title>
  <link rel="stylesheet" href="/css/app.css">
  {% block head %}{% endblock %}
</head>
<body>
  {% include "partials/nav.njk" %}
  <main class="container">
    {% block content %}{% endblock %}
  </main>
  {% include "partials/footer.njk" %}
  {% block scripts %}{% endblock %}
</body>
</html>

res.render() — The Core API

// Signature
res.render(view, [locals], [callback]);

// Basic usage
app.get('/profile', async (req, res) => {
  const user = await User.findById(req.params.id);
  res.render('profile', {
    user,
    title: `${user.name}'s Profile`,
    isOwner: req.user?.id === user.id
  });
});

Defence in Depth

• Always use escaped output as default
• Only use raw output for trusted, pre-sanitised HTML
• Sanitise with DOMPurify or sanitize-html before storage
• Set Content-Security-Policy headers
• Use helmet middleware in Express

const sanitizeHtml = require('sanitize-html');

// Sanitise BEFORE storing
const clean = sanitizeHtml(userInput, {
  allowedTags: ['b', 'i', 'em', 'strong', 'a'],
  allowedAttributes: { a: ['href'] }
});

// Now safe to render raw
// <%- clean %>

app.js

const express = require('express');
const path = require('path');
const app = express();

// View engine setup
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Static files
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));

// Global locals
app.locals.siteName = 'MyApp';

// Per-request locals
app.use((req, res, next) => {
  res.locals.currentUser = req.user || null;
  res.locals.path = req.path;
  next();
});

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

app.get('/users', async (req, res) => {
  const users = await User.find();
  res.render('pages/users', {
    title: 'Users', users
  });
});

app.use((req, res) => {
  res.status(404).render('errors/404');
});

app.listen(3000);