Preview

<aside> 💡 Static websites, Dynamic websites and JAMStack

Static websites aka server-side rendering in its simplest form is just a bunch of HTML pages connected via links.

Server does all the rendering and sends it to client browser ready for view.
Fast initial load, full page reloads after, but great SEO.

In comparison to dynamic websites aka client-side rendering (or more broadly web applications) which handle interactivity via Javascript (vanilla or with frontend frameworks).

Server sends a base HTML referencing JS files that does more of the rendering work in the browser
Slow initial load but faster re-renders after. For example, Single Page Applications (SPA) implements routing on the UI side, so no actual reloads but bad/hard SEO.

Here are some details on the differences

Frontend frameworks (React, Angular, Vue), fundamentally client-side, also allows you to server-side-render some pages.

There's also JAMStack which is kind of a hybrid between the two, with the slogan "Static websites don't have to be static". Static Site Generators (e.g. code in JS, outputs HTML), CMS, Serverless functions. e.g. Gatsby, Next.js

</aside>

We've been serving HTML files directly to the client, which are perfect for static websites.

But it would be nice to at least: 🤔

embed some variables that get evaluated when the page is loaded
create reusable HTML that we can "inject" into other pages

We can do that with Template Engines ⚙

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Express docs

Some popular templating languages you may be familiar with: JSP, PHP, ERB, rhtml

There are a ton of options for the Template Engine to use for Express, but we'll pick EJS because it has an HTML-like syntax

EJS (Embedded JavaScript) Templates

Passing data to view
```
<h1><%= myVar %></h1>
```

Conditional

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Loops

<ul>
  <% users.forEach(function(user){ %>
    <li><%= user.name %></li>
  <% }); %>
</ul>

Includes

Perfect for reusable parts like Header, Footer, Nav
```
<header><% include  ./header.ejs  %></header>
```