By: Rahul Murugesan, Senior Engineer

Jamstack is a modern way of building a website which delivers high performance on all parameters. The stack was initially coined by Netlify as a way to promote their platform for automating modern web projects. JAM is an acronym for Javascript, API, and Markup, concepts that most of us use in one way or the other. Let’s drill down into each component of the JAM Stack & understand what it means.

JavaScript: these days whatever application we see on our browser is driven by some Javascript-oriented framework. Whether it is React, Angular or Vue, all use javascript for rendering on browser. The main goal of these frameworks is to create Single Page Applications (SPA’s).

Application Programming Interface (API): APIs are called at runtime to fetch the data from the respective endpoints. APIs typically comprises of backend part of the architecture and data is fetched from Headless CMS at build/run time via APIs.

Markup: it is human-readable, meaning markup files contain standard words, rather than typical programming syntax. JAM stack gives pre-built markups which helps in the faster loading of websites.

Using automated Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs. The architecture is basically made to split up the code, infrastructure, and content to deliver a faster user experience that is more secure and stable.

Jamstack gets rid of multiple moving blocks in the code thereby resulting in a less burden on the hosting infrastructure. Not only this, Jamstack offers other capabilities as well which might make you opt for this architecture for your next web app.

Security

One of the vital parts that is needed to be considered while developing any application is security. When it comes to Jamstack-based sites, they proved to be more secure as the architecture approach lowers the possible security vulnerabilities and removes most of the security threats that a standard architecture suffers. Since Jamstack sites serve as pre-rendered static pages, the potential vulnerabilities for attacking the web application or database servers are dropped to zero. In addition, the Jamstack sites handle dynamic functions via APIs and client-side JavaScript, which are a lot less exposed than traditional CMS.

Authentication

In the Jamstack architecture, the dynamic functionality is taken care of by APIs. Most of the APIs require authenticity verification for the request and also the Jamstack static sites needed to be authenticated dynamically. A well-architected authentication solution is crucial to maintain the security of the Jamstack sites. OAuth 2.0, one of the flexible authorization frameworks, fits well for the Jamstack sites. Some of its protocol that solves the authentication challenge while integrating APIs into Jamstack sites are authorization code grant, implicit grant, resource owner credential, and client credential protocols, etc. Based on the protocol that fits the use case, one can store the token in the session or cookies and manages it for the subsequent request.

Scalability

The flexibility to scale up and down the application based on the usage or needs is one of the most crucial parts of any application. The Jamstack approach impresses us when it comes to scalability as it uses Content Delivery Networks (CDNs) to deliver the site for its end user. CDNs bear the responsibility for the scalability of the application as it was a part of its offering to the customers. CDNs are nearly infinitely scalable because they are built to deliver static (cached) files to users.

Performance

As the site’s content is distributed as static pages via CDN, the website is distributed across numerous servers across the world. The user will be directed to one of the servers which is closest to their location as a result of it, the load time will be decreased drastically for all the users irrespective of their location which will improve the Search Engine Optimization (SEO) of the website.

Dynamic Functionality

Jamstack architecture aims to make a dynamically generated static site while taking the best parts of Web 1.0 and combine them with Web 2.0. A lot of misconceptions arise around the term “static sites” that the sites are inflexible or fixed. But the context for the term “static sites” is that browsers don’t need any help delivering their content — they’re able to use them natively without a server handling a processing step first. The site can also load data asynchronously, read & write data into databases, handle file processing and perform much more dynamic functionality.

Final Thoughts

The Jamstack architecture is an integral part of modern web app development. When it comes to speed, SEO, performance, scalability & security, it clearly exceeds and outmatches the standard architecture approach. The ecosystem of this stack is also starting to evolve and overcome its limitations. There is no doubt that Jamstack is the future and we will be seeing more of these dynamic static pages in real time.

References

• https://cobiro.com/blog/meet-customer-demand-with-a-scalable-website
• https://css-tricks.com/apis-and-authentication-on-the-jamstack