Server-Side Rendering with Express, EJS & Handlebars
Build full MVC web applications with server-rendered HTML using EJS, Handlebars, and Express.js
Before React and SPAs dominated the frontend, server-side rendering powered most of the web. It still powers a huge amount of production sites today, and is experiencing a renaissance through frameworks like Next.js (SSR) and Remix. This course teaches you SSR from first principles using Express.js, EJS, and Handlebars — building real MVC web applications with authentication, dynamic views, and database-driven content.
Course Prerequisites
- Node.js Runtime Mastery & Production REST API Engineering with Express & TypeScript: Node.js Runtime Mastery & Production REST APIs
Part of Academy Track:
What You Will Master
Curriculum Modules (5 Modules)
Explore the structured module breakdown, lesson outcomes, and practical lab exercises.
Module 1: SSR Fundamentals & Express View Engines
4 Lessons • ~3.5 Study Hours (0.35 CEUs)Module 1: SSR Fundamentals & Express View Engines. Understand the SSR vs SPA trade-offs, where server-rendered HTML still wins, and how EJS and Handlebars fit into the Node.js ecosystem.. Trace a complete SSR request from browser to Node.js Express server, template engine rendering, and HTML response — understanding what makes it different from a JSON REST API.
Course Introduction — Server-Side Rendering in the Modern Web
Understand the SSR vs SPA trade-offs, where server-rendered HTML still wins, and how EJS and Handlebars fit into the Node.js ecosystem.
How SSR Works — The Request-Response-HTML Cycle
Trace a complete SSR request from browser to Node.js Express server, template engine rendering, and HTML response — understanding what makes it different from a JSON REST API.
Configuring Express View Engines
Set up Express with a view engine (EJS or Handlebars), configure the views directory, pass dynamic data with res.render(), and serve static files with express.static.
Layouts, Partials & Template Inheritance
Avoid duplicating HTML across pages by implementing layout templates, shared partials (header, footer, nav), and template inheritance patterns.
Module 2: EJS: Embedded JavaScript Templates
5 Lessons • ~5.1 Study Hours (0.51 CEUs)Module 2: EJS: Embedded JavaScript Templates. Learn all five EJS tag types: <%= output %>, <% scriptlet %>, <%- unescaped %>, <%# comment %>, and <%_ whitespace-consuming variants.. Render dynamic lists with forEach loops, conditionally show elements with if/else, iterate over objects, and implement pagination controls in EJS templates.
EJS Syntax — Tags, Expressions & Scriptlets
Learn all five EJS tag types: <%= output %>, <% scriptlet %>, <%- unescaped %>, <%# comment %>, and <%_ whitespace-consuming variants.
Loops, Conditionals & Iteration in EJS
Render dynamic lists with forEach loops, conditionally show elements with if/else, iterate over objects, and implement pagination controls in EJS templates.
EJS Includes & Layouts with express-ejs-layouts
Modularise EJS templates using <%- include() %> for partials and implement full layout inheritance with the express-ejs-layouts package.
Form Handling & POST Data with EJS
Build HTML forms in EJS, handle POST submissions with express.urlencoded, validate input, display validation errors inline in the form template.
EJS Project: Build a Server-Rendered Blog Engine
Apply all EJS concepts in a mini-project: a blog engine with an article list, individual article view, create/edit forms, and a shared layout.
Module 3: Handlebars: Logic-less Templates
5 Lessons • ~5.1 Study Hours (0.51 CEUs)Module 3: Handlebars: Logic-less Templates. Understand why Handlebars enforces logic-less templates, learn the {{}} Mustache syntax, HTML escaping, and triple-stash {{{unescaped}}} output.. Master Handlebars' built-in block helpers: #if, #unless, #each (with @index, @key), #with scope binding, and the {{else}} fallback block.
Handlebars Philosophy & Mustache Syntax
Understand why Handlebars enforces logic-less templates, learn the {{}} Mustache syntax, HTML escaping, and triple-stash {{{unescaped}}} output.
Built-in Helpers: #if, #unless, #each, #with
Master Handlebars' built-in block helpers: #if, #unless, #each (with @index, @key), #with scope binding, and the {{else}} fallback block.
Partials & Layouts with express-handlebars
Register and use Handlebars partials for shared components, implement multi-level layouts with express-handlebars, and pass data into partials.
Custom Helpers — Formatting & Business Logic
Write custom Handlebars helpers for date formatting, currency display, string manipulation, and conditional logic — keeping templates clean and logic in helpers.
Handlebars Project: Product Catalogue with Filtering
Build a server-rendered product catalogue with category filtering, product detail pages, and a custom currency formatting helper.
Module 4: MVC Architecture & Database Integration
4 Lessons • ~4.4 Study Hours (0.44 CEUs)Module 4: MVC Architecture & Database Integration. Implement the Model-View-Controller pattern in an Express application: route handlers delegate to controllers, controllers call models, models interact with the database, views render the result.. Integrate Mongoose (MongoDB) or Prisma (PostgreSQL) models into an MVC Express application, write CRUD controller methods, and render database results into EJS/Handlebars views.
The MVC Pattern in Express — Models, Views, Controllers
Implement the Model-View-Controller pattern in an Express application: route handlers delegate to controllers, controllers call models, models interact with the database, views render the result.
Database Models: Mongoose & Prisma in an MVC App
Integrate Mongoose (MongoDB) or Prisma (PostgreSQL) models into an MVC Express application, write CRUD controller methods, and render database results into EJS/Handlebars views.
Pagination, Search & Server-Side Filtering
Implement server-side pagination (page/limit query params), keyword search with database queries, and category/tag filtering — all rendered as HTML without JavaScript.
File Uploads in SSR Applications
Handle multipart/form-data file uploads with Multer, store files locally or to cloud storage (S3/Cloudinary), and display uploaded images in server-rendered templates.
Module 5: Authentication & Full MVC Project
4 Lessons • ~4.6 Study Hours (0.46 CEUs)Module 5: Authentication & Full MVC Project. Implement session-based authentication: user registration, bcrypt password hashing, login, session storage (Redis or MemoryStore), and logout flows.. Use connect-flash to pass one-time messages between redirects: success confirmations, validation errors, and authentication failure messages displayed in EJS/Handlebars templates.
Session-Based Authentication with express-session
Implement session-based authentication: user registration, bcrypt password hashing, login, session storage (Redis or MemoryStore), and logout flows.
Flash Messages & Form Feedback with connect-flash
Use connect-flash to pass one-time messages between redirects: success confirmations, validation errors, and authentication failure messages displayed in EJS/Handlebars templates.
Route Protection & Middleware Guards
Protect views and routes with authentication middleware, implement role-based view rendering, redirect unauthenticated users, and prevent access to admin pages.
Full MVC Project: Task Manager with Auth & Dashboard
Build a complete, production-structured MVC task manager application with session auth, EJS views, MongoDB models, CRUD operations, pagination, file uploads, and a protected dashboard.
Node.js Backend Progression
Continue advancing through the sequential curriculum stages of this academy track: