Static, Dynamic, or Decoupled?
While it's useful to classify site architecture as static, dynamic, or decoupled, things aren't always thus clear-cut in real life.
- Is a site still fully static when you load its front-end assets from a Content Delivery Network (CDN)?
- A decoupled site still needs to communicate with a Content Management System (CMS)... is such a site not also dynamic then?
As you can see, putting things in boxes rarely works out 100%. What we can say with certainty is that site architecture is a spectrum, a sliding scale from fully self-contained to fully decoupled.
The Architecture Spectrum
Static, fully self-contained
- Content static.
- Pages created by hand or generated with Static Site Generator.
- All front-end assets provided.
- No external front-end assets loaded.
Static, mostly self-contained
- Content static.
- Pages created by hand or generated with Static Site Generator.
- (Some) assets externally loaded (typically via CDN).
Static-dynamic hybrid
- Content mostly static.
- Some content / forms embedded and externally hosted (social media embed, signup forms, ...)
Dynamic / Monolythic
- Content served by CMS.
- Front-end code generated by CMS.
- Assets locally or externally hosted.
Fully decoupled
- Content served by non-user-facing CMS
- Static user-facing front-end fully decoupled.
- Front-end and back-end communicate via JavaScript / web service calls.
- Assets locally or externally hosted.
Progressive Web App (PWA)
For completeness' sake we need to mention Progressive Web Apps as well.
A PWA is, in a nutshell, an application built with HTML, CSS, and JavaScript, that can function as a stand-alone app on desktops and mobile devices. It uses modern browser features and stores all of its data in the browser's localStorage. This way it can function as a stand-alone application that doesn't necessary need an active internet connection for (some of) its functionality.