<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.

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

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


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

But it would be nice to at least: 🤔

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