The key characteristics of the JAMstack web architecture are outlined below.
The diagram below outlines the differences between traditional web architecture and JAMstack web architecture.
The key difference is the reduction in server-side complexity, removing the need for a tightly coupled Web Server and App Server, as well as the Database and/or Content Management System (CMS). Instead, the focus shifts to “client + services”, where the main web application can be distributed globally via a Content Delivery Network (CDN) and (where required) interacts with discrete services directly from the client via APIs.
The diagram below provides a deeper look at the JAMstack web architecture, highlighting the developer experience.
Static site generators (e.g. Jekyll) and build tools (e.g. Gulp), provide a mechanism to automatically build web applications locally, producing a set of easy to cache static assets. These static assets can then be deployed via a simple “Git Push”, following a traditional Continuous Integration / Continuous Deployment methodology.
The advantages of a JAMstack web architecture are outlined below.
Performance: Web applications are pre-built, delivered as static assets that are served over a CDN, which promotes caching and efficient Search Engine Optimisation (SEO). Traditional web applications are built server-side “on the fly” and often heavily reliant on database queries, which all impact performance.
Security: Static assets offer the highest level of security for web applications, due to the fact they do not require databases, plugins or execute dynamic code server-side. Any required server-side processes are abstracted into service APIs, called by the client, which significantly reduces the attack surface. Traditional web applications often require server-side plugins (e.g. Wordpress) to operate, which are extremely vulnerable and require continuous maintenance.
Automation: Workflow is highly automated through the use of modern static site generators and build tools, with deployment occurring via a simple “Git Push”. This approach results in loose coupling and a clear separation of concerns, delivering a simplified development and debugging environment.
Cost: Static assets are simple to host, as they do not require complex server-side configuration. This simplicity ensures a highly competitive market and therefore very aggressive pricing (even free).
If you are still not convinced, linked below are few examples of web applications built using the JAMstack web architecture:
The image below from Google PageSpeed Insights, highlights the performance of LifeinTECH and JAMstack.