Author
The Jamstack approach to building static websites refers to a modern web development architecture based on JavaScript (J), APIs (A) and Markup (M) that decouples the front and back end of traditionally monolith apps. The term was originally considered as referring to a specific technology stack but is now interpreted as an approach to the architecture of static web apps.
One result of that evolution from web development tech stack to architectural style has been that the name has subtly changed its casing from JAMstack to Jamstack.
What is Jamstack?
Like a Serverless approach, Jamstack serves a website or application from static storage and makes use of microservices. At the core of the Jamstack approach to web development is that it transfers as many software tasks as possible from the server-side, transferring them to the client.
Jamstack apps are not serverless per se, which is all about how the backend is managed by outsourcing traditional server functions and management to a cloud provider, but they do have a lot of overlap.
Can We Help You With Your Next App Development Project?
Flexible models to fit your needs! Quote in 24 hours
Jamstack strengths
Jamstack sites and apps are becoming increasingly popular as an alternative to traditional, monolith static site architectures because they are:
- Faster – prerendering and CDN deployment means static pages can be served lightning-fast.
- More secure – no server or database vulnerabilities because neither are used.
- Scalable – CDN delivery means a Jamstack app will automatically scale without developer intervention to increase capacity if higher usage, or sudden spikes, require more resources.
Jamstack drawbacks
However, despite all of the advantages a Jamstack approach to static web development brings, it is not necessarily always the best choice for a new website or app. Building and maintaining a Jamstack website requires access to web development expertise, which is not cheap.
And while getting used to using a headless architecture CMS that serves content as Markup is not hugely difficult, it is certainly less beginner-friendly and those responsible like content marketers and editors may need to learn new skills including using Markup. The alternative would be to establish a separate more technical role responsible for editing and publishing content. However, that also increases costs.
But despite the drawbacks, migrating an existing monolith static site on a platform like WordPress to Jamstack can bring many technical advantages and, executed well, can really improve performance and UX. But it is an investment that will not always fit the current strategy of an organisation.
If you would like to discuss if Jamstack is the right option for you when it comes to your next static web development project, or migrating an existing app, drop us a line. Our experts will happily lend their experience and offer an opinion.
In the meanwhile, let’s dig into the Jamstack’s technical and strategic strengths and drawbacks in some more detail.
Can We Help You With Your Next App Development Project?
Flexible models to fit your needs! Quote in 24 hours
Static website vs dynamic website
To introduce Jamstack it makes sense to first define the difference between dynamic, also referred to as Real-Time, and static websites and apps. All web apps fall into one of these two groups.
In the case of dynamic apps, when a user requests a webpage, the page is collected at the time of the request, and then displayed in the browser. Social media feeds that automatically update within the browser without it being reloaded are a familiar example of dynamic apps.
In the case of static, the server maintains the pages ready to go. For example, the page you are reading now is served statically. The content is written and uploaded in the CMS and when you clicked on the URL to open this page your browser sent a request to the server our B2B site is hosted on, which in turn sent the code of the static page to be loaded.
If this article were to be updated in our CMS while you were reading it, the changes would not be visible on your screen unless you refreshed the page, sending a new request to the server.
The defining features of dynamic websites are their functionality, customisation, and ease at which they can be updated. Opting for a dynamic approach allows you to create complex systems. The disadvantage of most dynamiс websites is the comparatively high usage of system resources due to the need for a web server and database.
Static websites, like this one, consist of ready-to-go web pages (HTML, JS, graphics, fonts), downloaded and stored on the server. The advantages of static websites are high-speed page load and better resistance to hacker attacks. If correctly built, static websites can also better handle high levels of traffic than dynamic alternatives.
But there are also disadvantages. To make even the slightest change to a static website, you need to regenerate it from scratch. Which is exactly the challenge Static Site Generators (SSG) and Jamstack were developed to address.
Jamstack by technology – JavaScript, APIs, Markup
The original JAMstack focused on a technology stack of JavaScript, APIs and Markup:
JavaScript (JS)
A programming language used to code dynamic functionalities. The vast majority of modern web applications use it on the front-end and increasing also in the backend (eg. Node.js).
APIs
The set of technologies that includes subroutine definitions, communication protocols, and tools for building software.
Markup
A computer language that includes tags to define elements within a document. It differs from a typical programming syntax and can be read by a human. The most used Markups are HTML and XML.
Jamstack by architecture
JAMstack has evolved into Jamstack, which refers more universally to the architectural approach to building decoupled static sites and is less concerned with the particular choice of tech stack used to achieve that. There is a level of debate on the specifics of websites and apps that can be classified as ‘Jamstack’ but consensus the architecture should represent:
Decoupling of the back and frontends
The front and back ends are always decoupled in a Jamstack web app, which is the most obvious point of difference from a traditional monolith architecture.
The front end can be coded from scratch in JavaScript or using any JS library or framework such as Reactjs, Angular or Vuejs. Or, more commonly, built using a static site generator like Next.js, Gatsby or Hugo.
There are also now Jamstack site builders including Stackbit, Builder.io and CloudCannon, which lower the entry barrier for less technical people and offer developers contemporary tooling for efficient customisation. The downside to site builders is they do inevitably bloat the code, reducing speed. However, not to the same extent as, for example, WordPress builders.
Back end and front end are typically integrated via APIs and server-side processes can leverage Serverless functions.
Static by nature
Jamstack sites are always static with dynamic elements, usually pre-rendered, introduced via in the form of third-party services eg. Disqus for comments. The front end of Jamstack apps is built and compiled into HTML, CSS and JavaScript files.
Static sites load faster and are more easily scaled. The downside is heavy reliance on third-party services for dynamic elements.
Progressively enhanced
Pre-rendered sites can be enhanced by the introduction of JavaScript only when and where required, optimising browser performance.
Optimising a Jamstack app
Jamstack.wtf recommends the following best practices to optimise the strengths of a Jamstack build:
Use a CDN
Pre-built markup means a static site can be served via a Content Delivery Network (CDN) for optimised performance and automated scaling.
Atomic deploys
Using atomic deploys which represent a full site snapshot helps maintain a consistent version of the site globablly following updates.
Set cache invalidation in your CDN
Your CDN settings should enable cache invalidation for new builds which will mean updates go live almost instantly following release.
Everything in version control
Use a version control system like Git to host your codebase so file history is tracked and any changes traceable. Version control also facilitates more efficient collaboration.
Automate builds
Automate server notification for new builds so it can build the project and update the CDN with the new version. This is usually achieved via webhooks.
Developing a Jamstack-based website
- Choose a host with a fast CDN to deliver your static files. That might be Amazon Web Services (AWS) such as S3, Netlify, or Custom Setups with CloudFlare.
- Choose between a Static Site Generator (SSG) or hardcoding your front end from scratch in JavaScript. There are a lot of SSGs and the most popular are:
- Jekyll (built in Ruby),
- Hugo (built around Google’s Go programming language),
- Gatsby (using ReactJS),
- Hexo (created with Node.js).
- Take a decision on a Git-based or API-driven CMS.
- If you need dynamic features like user comments, forms, search, payments, media management you can use third-party services like Disqus (comments), FormKeep (forms), Lunr (seach), Stripe (payments) and Cloudinary (media management.
Examples of Jamstack sites and apps
If you’re still not sure about JAMstack in terms of a commercial project, it might help to assess some live case studies. Some nice examples of Jamstack websites/app include:
Smashing Magazine (web development media)
The Covid Tracking Project (pandemic data project sponsored by The Atlantic)
DevPodcasts.app (podcasts platform targeted at software developers)
Sequoia Capital (corporate website of venture capital giants)
Victoria Beckham Beauty (ecommerce site)
Conclusion – Jamstack is a great approach to static (for the right project)
Jamstack is a great approach to static sites with a lot of advantages for websites and apps that prioritise scalability and/or for whom load speed and optimal user experience are a priority and only need a limited number of well-defined dynamic functions.
But Jamstack is not the way to go if you don’t have the budget, or it’s not a priority, to invest in a site or app that needs to be built and maintained by developers. Or you don’t have the resources or desire to train or hire content managers/editors able to work with Markup or to allocate more technical support.
We’re a web development company and our B2B company site is built on WordPress. We don’t feel, at this stage, the benefits a migration to Jamstack would bring would compensate for the additional resources that would necessitate allocating.
As with most tech stack choices, Jamstack is as much a strategic and business decision as it is a technical one.
But if you feel Jamstack could be the right technical and strategic direction for your web development project or have already reached to conclusion Jamstack is for you, we’d be delighted to lend our experience to helping you decide or providing a quote within 24 hours. Just drop us a line!
K&C - Creating Beautiful Technology Solutions For 20+ Years . Can We Be Your Competitive Edge?
Drop us a line to discuss your needs or next project
