JamStack Architecture Overview
Pre-rendering
To generate the markup which represents a view in advance of when it is required. This happens during a build rather than on-demand so that web servers do not need to perform this activity for each request received.
Decoupling
JAMStack components
- Static Site Generators
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates.
Essentially, a static site generator automates the task of coding individual HTML pages and getting those pages ready to serve to users ahead of time.
2. CDN (Content Delivery Network)
A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.
A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.
3. Headless CMS
Main job of a headless CMS is to store and manage your content. It doesn’t really care what you want to do with that content. The main job of display platforms like a website or mobile app is to present content to people. They don’t really care how that content is stored or managed.
APIs are the magical connection points that allow these backend systems (e.g., headless cms) and frontend systems (e.g., website) to communicate in the specific ways a digital team wants them to.
4. Serverless Functions
Serverless architecture, or serverless frameworks, refer to a model where an organization’s software applications are hosted by a third-party cloud service provider and are event driven, which eliminates the need for developers to manage hardware and software infrastructure and avoids vendor lock-in.
Serverless architecture encompasses Function-as-a-Service (FaaS), which allows you to construct your application from individual, independent functions. The FaaS provider hosts each function, which can be automatically scaled to meet traffic demands.
JAM Stack vs Conventional Arch
JAMStack workflow
JAM Stack — Benefits
- Secure Websites
Serving pages and assets as pre-generated files allows read-only hosting reducing attack vectors even further - Performance
Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build - Cost Effective
For using a static site generator and CDN, you don’t need to spend money on data storage, servers, and their maintenance - Better User Experience
JAMStack Sites are comparatively fast than traditional sites, which increases the user experience on the website - Developer Friendly
Loose coupling and separation of controls allow for more targeted development and debugging - Scalability
Sites can easily scale up or down to handle unexpected shifts in traffic as they are hosted on the CDN
JAM Stack vs Conventional Arch on the following factors:
Performance:
JAM Stack:
JAM Stack generates the static pages while deploying itself and serve the pages directly from CDN. This solution ensures that the performance remains high despite the heavy workload
Conventional Architecture
Requests and responses typically go through a lot of layers. Database requests are time-consuming. And implementing an effective cache is not always as easy
Security:
JAM Stack:
Static sites have very little potential for vulnerabilities as they are only static HTML files and external APIs are served by the CDN. This limits all potential (traditional) attack vectors on the website
Conventional Architecture
Less secure, because of many distributed exposed parts. Prone to attacks if we have not secured the application explicitly.
Cost:
JAM Stack:
Jamstack websites do not require a lot of infrastructures, which saves money. Hosting static files is relatively much cheaper (sometimes free) compared to servers where a database and specialized add-ons are required.
Conventional Architecture
Infrastructure setup and maintenance requires higher cost
Hosting:
JAM Stack:
Application and hosting are not related, which means beneficial serverless functions
Conventional Architecture
Application and hosting are related. The visual part (front-end) is usually related to the back-end, additionally, there is a need to support the database.
Request Handling:
JAM Stack:
JAMstack sites don’t depend on a single server-side code, the request refers to geographically dispersed servers that work together to ensure fast pre-rendered content delivery (CDN — content delivery network).
Conventional Architecture
The response is processed and returned after a long series of interactions between the database, back-end code, server, browser, and cache layers.
Content Management (CMS):
JAM Stack:
Updating with CMS systems such as Netlify CMS, Contentful, or the popular headless CMSs versions of WordPress. For live preview, we need to manage additional services
Conventional Architecture
The content is updated via traditional CMS systems such as WordPress or Joomla. Live preview is seamless
JAMStack deciding factors:
- The website includes more static assets/ pages then go with JAM Stack
- Focus less on the backend infra side
- The flexibility of making changes in the frontend (decoupling)
- Scalable product
- Quality assets with performance
- SEO prioritization
- Many production ready 3rd party services, will improve the time to production
- Cost is less since we have less infra
Adoption Survey
Advertising, marketing & media, and publishing are 3 dominant industries among those who decide to get started their web and app development using JAMstack.
The JAMstack projects are the most often created for personal websites, b2b software, and e-commerce purposes. And e-commerce has been a growing trend over the years.
Real World Adoption
Pitfalls of JAM Stack
- JAMStack is primarily for static applications, it is less suitable to serve dynamic content
- When change is affecting multiple parts of the app, end-to-end updations in CMS / Static site is overkill and time consuming
- It is developer-friendly but not Content author friendly
- Less plugin support
- When we need on-premise servers, JAM Stack would not be the best option
- Providing custom flavour/ suggestions based on the user's interest will be hard.
