# Views and Static Files Course: [Express.js](https://www.devtutorials.ai/learn/expressjs) · Section: Views and Static Content Source: https://www.devtutorials.ai/learn/expressjs/views-static/server-side-views > EJS templates, passing data, loops, conditions, partials and safe escaping, then serving CSS, images and scripts with express.static, caching, SPA fallbacks and keeping private files safe. ## Server-Side Rendering Introduction **Server-side rendering (SSR)** = the server builds the full HTML page before sending it. - The browser gets a finished page. It does not need to build it. - Express builds pages from **templates** and **data**. - **Template** = an HTML file with gaps for data. - **View engine** = the tool that fills the gaps. This course uses **EJS**. - `res.render("menu", data)` fills `views/menu.ejs` and sends the HTML. **Simple lesson:** A template plus data makes a page. ### A Real-World Example Every school report card has the same printed layout. 1. The layout has empty boxes: name, class, marks. 2. The office fills in one student's details. 3. Each student gets the same layout with different details. 4. Nobody draws a new report card from scratch. The printed layout is the template. The details are the data. Filling the boxes is rendering. In this lesson, you will learn: 1. How Express builds HTML pages from EJS templates and data. 2. Loops, conditions, partials and safe escaping. 3. Custom view engines, and when server-side rendering fits. 4. How to serve a folder with `express.static`. 5. Mount paths, absolute paths and caching options. 6. How to serve a built frontend app safely. ## Static HTML vs Dynamic HTML - **Static HTML** = the same file for everyone. See the other part of this lesson. - **Dynamic HTML** = built per request, with today's data. - The canteen's "About us" page can be static. - The canteen's "Today's menu" page changes daily, so it is dynamic.
Animation: a template and data go into res.render, and a finished HTML page comes out views/menu.ejs {"
  • <%= item %>
    • "} data ["Idli", "Dosa"] res.render() HTML page {"
  • Idli
    • "}     {"
  • Dosa
    • "}
    The template and the data meet in res.render. A finished page comes out.
    **Simple lesson:** Static pages never change. Rendered pages change with the data. ## Setting Up a View Engine On your own computer, install EJS first: ```bash npm install ejs ``` - **app.set("view engine", "ejs")** = use EJS for files without an extension. - **app.set("views", folder)** = where templates live. Default: `views` in the project. - **View file extension:** `.ejs`. `res.render("menu")` finds `views/menu.ejs`. - You do not need to `import ejs`. Express loads it from the setting. In this lab, EJS is already installed. On your own computer, `npm install ejs` adds it to `package.json`. - The response panel shows the rendered page. Press **Source** to see the HTML. - `<%= school %>` was replaced by `Green Valley`. **Simple lesson:** Set the view engine, put templates in `views/`, call `res.render`. ## EJS Tags - **`<%= value %>`** = print a value, **escaped** (safe). - **`<%- value %>`** = print a value **unescaped** (raw HTML). - **`<% code %>`** = run JavaScript, such as `if` and loops. Prints nothing. - **`<%# note %>`** = a comment. Not sent to the browser. - **`-%>`** = also removes the line break after the tag. **Simple lesson:** `<%=` prints safely, `<%` runs code. ## Passing Data to Templates The template can read data from three places, merged together: - **app.locals:** shared by every page, such as the school name. - **res.locals:** for this request, such as the logged-in user. - **The object in res.render:** for this page, such as the menu. - If two have the same name, the `res.render` object wins. - `school` comes from `app.locals`, `student` from `res.locals`. - The `forEach` loop prints one `
  • ` per item. - `?veg=true` turns on the note and filters the list. **Simple lesson:** Loops and `if` go in `<% %>`. Values go in `<%= %>`. ## Reusable Views Every page needs the same header and footer. - **Partial** = a small template used inside others, such as `partials/header.ejs`. - **Include** = `<%- include("partials/header") %>` puts a partial in place. - Use `<%-` for includes, because the partial is HTML you trust. - You can pass data: `include("partials/header", { title: "Menu" })`. - **Layout** = the shared page shape. In EJS, you build it with a header and a footer partial. ```text views/ ├── home.ejs ├── about.ejs └── partials/ ├── header.ejs └── footer.ejs ``` **Simple lesson:** Write the header once, include it everywhere. ## Template Safety Some data comes from users, such as a name or a review. - A user might type `` as their name. - `<%= name %>` escapes it, so the browser shows the text and runs nothing. - `<%- name %>` prints it raw, so the script would run. This attack is **XSS**. - Use `<%-` only for HTML you wrote yourself, like includes. - Never build a template from user text. Only pass user text as data. - Press **Source**. The safe line shows `<script>`. The unsafe line has a real `