Overview
Every website is typically a combination of:
- HTML markup (the content we see laid out on individual pages), typically one physical HTML file (e.g. about.html) per web page
- Front-end assets
- CSS (Cascading Style Sheets), the styles and layouts applied to those pages
- JavaScript, a programming language that defines their behavior (visual effects, interactivity, etc.)
- Media assets: images, sound & video files, and other downloadable resources.
Static Sites
Before dynamic sites existed, there were only static sites: each page is stored on a server as a simple file, grouped together in a directory together with the CSS, JavaScript, and other files.
When you visit a page, your browser (called client) makes a request to that server. The server identifies which files need to be retrieved, and sends those back to your browser.
With static sites, everything happens client-side. Other than retrieving and sending back the required files to the client (browser), no server-side processing happens during this entire exchange: no code is executed on the server, no database is contacted, no authentication needs to happen.
Dynamic Sites
Dynamic sites tend to be more complex in nature than Static sites.
When a request comes in, a CMS (Content Management System) typically generates or assembles the required HTML, CSS, and JavaScript, and does so using front-end templates, database queries, caches, and other components.
Applications that power dynamic sites typically need various server resources, such as server-side scripting languages like PHP, Python, or NodeJS, a database like MySQL to store data, and in-memory database like Redis or Valkey to speed things up.
Image: cloudcannon.com
Advantages of Static Sites
Because no server-side processing happens, the following is generally true:
- Fast (no time spent on server-side processing)
- Low complexity (no server-side resources to set up and maintain)
- Secure (no moving parts = small attack surface)
- Cheap to host (few server resources required; all you need is file storage)
- Easy to host (few things to configure)
- Hosting provider choice (many hosting providers and network infrastructure providers offer static hosting)
Disadvantages of Static Sites
- Limited functionality
- Form submits can't be processed server-side (no user registrations, contact forms, login screens, ...)
- No per-use personalisation: every visitor sees the same pages
- Content management can be more resource-intensive
- Larger static sites that are built completely by hand (without a Static Site Generator) can take more time and resources to maintain when the same changes need to be made across many individual pages. Like a new logo, a new footer, or an entirely new frontend design.