Як використовувати шаблонні движки в Express.js?

Двигуни шаблонів у Express.js

Двигун шаблонів рендерить HTML на сервері, поєднуючи файл шаблону з динамічними даними. Express підтримує багато двигунів шаблонів через конфігурацію app.set('view engine').

Двигун	Розширення файлу	Стиль
EJS	`.ejs`	Схожий на HTML з тегами `<%= %>`
Pug (Jade)	`.pug`	На основі відступів, без закриваючих тегів
Handlebars	`.hbs`	Синтаксис без логіки `{{ }}`
Nunjucks	`.njk`	Схожий на Jinja2 (знайомий для Python)

EJS — Найпоширеніший

bash

npm install ejs

// app.js
app.set('view engine', 'ejs');
app.set('views', './views'); // де знаходяться файли шаблонів

html

<!-- views/users.ejs -->
<!DOCTYPE html>
<html>
<head><title>Користувачі</title></head>
<body>
  <h1>Користувачі (<%= users.length %>)</h1>
  <ul>
    <% users.forEach(user => { %>
      <li><a href="/users/<%= user.id %>"><%= user.name %></a></li>
    <% }) %>
  </ul>
  <% if (users.length === 0) { %>
    <p>Користувачів не знайдено.</p>
  <% } %>
</body>
</html>

// Маршрут
app.get('/users', async (req, res) => {
  const users = await User.findAll();
  res.render('users', { users, title: 'Список користувачів' });
  //          ↑ ім'я шаблону    ↑ дані, передані шаблону
});

Теги EJS

Тег	Призначення
`<%= value %>`	Вивід (HTML-екранований)
`<%- value %>`	Вивід (сирий, неекранований HTML)
`<% code %>`	Логіка JavaScript (без виводу)
`<%- include('partial') %>`	Включити інший шаблон

Pug — Мінімальний синтаксис

bash

npm install pug

app.set('view engine', 'pug');

pug

//- views/users.pug
html
  head
    title Користувачі
  body
    h1 Користувачі (#{users.length})
    ul
      each user in users
        li
          a(href=`/users/${user.id}`) #{user.name}
    if users.length === 0
      p Користувачів не знайдено.

Макети та частини з EJS

html

<!-- views/partials/header.ejs -->
<header>
  <nav>
    <a href="/">Головна</a>
    <a href="/users">Користувачі</a>
  </nav>
</header>

<!-- views/layout.ejs -->
<!DOCTYPE html>
<html>
<head><title><%= title %></title></head>
<body>
  <%- include('partials/header') %>
  <main>
    <%- body %>
  </main>
</body>
</html>

<!-- views/users.ejs -->
<%- include('partials/header') %>
<ul>
  <% users.forEach(u => { %>
    <li><%= u.name %></li>
  <% }) %>
</ul>

Передача даних до шаблонів

// Дані, передані до res.render(), доступні в шаблоні
res.render('profile', {
  title: 'Мій профіль',
  user: { name: 'Аліса', role: 'адміністратор' },
  posts: [...],
  isLoggedIn: true
});

// app.locals — доступно в УСІХ шаблонах автоматично
app.locals.appName = 'MyApp';
app.locals.year = new Date().getFullYear();

// res.locals — доступно в шаблонах для ЦЬОГО запиту
app.use((req, res, next) => {
  res.locals.currentUser = req.user || null;
  next();
});

Двигун шаблонів vs JSON API

	Двигун шаблонів	JSON REST API
Рендеринг	На стороні сервера	На стороні клієнта (React, Vue)
Використання	Традиційний MVC	SPA, мобільні додатки
SEO	Вбудований	Потребує SSR
Гнучкість	Тісно пов'язаний	Незалежний від фронтенду

Використовуйте двигуни шаблонів для серверно-рендерених HTML додатків (MVC патерн). EJS є найширше використовуваним — це просто HTML з тегами JavaScript. Для сучасних додатків з фронтендами на React/Vue пропустіть двигун шаблонів і створіть замість цього JSON REST API.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань