As Cobiro’s very first Technical Content Writer, it’s my job to turn complex information into something that’s coherent and easy to understand. I’ve put together this article to explain what JAMstack is and how it can create a future-proofed website experience.
Intentionally high-level, I’ve honed in on the key ideas and concepts behind JAMstack websites. It might not answer your most intricate questions, but if like me, you’re curious about exploring the subject further, it could help. I hope you enjoy it.
The elevator pitch
JAMstack is a modern approach to building websites. It’s not a programming language or a tool, but an architecture that delivers fast, secure, reliable and scalable websites.
The business case
If you’re looking to succeed online, your website has to be set up to perform. It needs to be:
- Fast: According to Google, for every second delay in mobile page load, conversions can fall by up to 20%
- Secure: Your customers expect you to be using the latest technology to keep their data confidential
- Reliable: Website outages are not a good look. It’s time for them to confined to the dustbins of history
- Scalable: Growing alongside your business should be seamless — with no impact on the customer experience
These are just a few examples, but you get the idea. And the single solution that delivers on all of these parameters? You guessed it: JAMstack.
How does it work?
JAMstack is an acronym that stands for JavaScript, Application Programming Interfaces (APIs), and Markup. The ‘stack’ is the combination of these three working together to deliver a single solution: the JAMstack website.
Definitions:
- JavaScript is the programming language for the web. It’s in charge of displaying the content and providing the user experience
- An API is a software intermediary that allows two applications to talk to each other. Checking the weather on your phone involves using an API
- Markup refers to HTML web code (your content) which is generated in advance (or pre-rendered)
Each component is separated so they become easier to work with. This is known as decoupling. But they interact together to deliver the end result (the stack part). I’ve created a simple workflow further on that adds a bit of context to this.
Introducing CDNs
Let’s jump ahead a little to see what happens when a website visitor navigates their way around your website, requesting content.
With a JAMstack site, the content is fetched from a Content Delivery Network (CDN). A CDN is a global network of data points (or servers) that work together to reduce the distance a website’s content has to travel before it reaches the end user.
OK, tell me more
A CDN stores a cached version of your website content in numerous server locations across the world. When a website user makes a request, the cached content is gathered from the closest server to where they’re based, rather than making a return trip to the website’s origin server.
So for example, if a person in Frankfurt is viewing your US hosted website, any content they request is accessed from a server in Germany rather than the website’s origin server in the US.
That’s not to say that the origin server becomes redundant — it’s just not relied upon to provide everything immediately, to everyone. Content is gathered from the origin server, but it’s done once, with a copy saved for future requests. It’s then available for as long as users request it.
There are so many benefits to providing content via a CDN, which we’ll get onto shortly. But first, here’s that workflow I promised.
A very simple workflow
I mentioned that the ‘stack’ is what brings everything together. This is just for illustrative purposes, but to give you an idea of how the components fit together in practice, it could look something like this:
- Your ‘static’ content is generated in the form of files from the website’s origin server
- These files include assets such as images, CSS and the actual JavaScript
- This static content is then cached across a CDN — making it easily and quickly accessible
- You’ll then need some help to make your website dynamic — for example integrating it with your Client Relationship Management (CRM) system
- To do this, APIs are used to communicate with the JavaScript files, facilitating the dynamic data
- Which is performed at the client side (where the user is based), rather than at the website’s origin server
- The result: A beautiful website experience
The benefits of JAMstack websites
If you’re running on a traditional CMS, you may want to look away now! That’s because the benefits are made possible by having access to the CDN’s numerous servers rather than relying on a single host which has to produce content on demand for every request (aka the traditional way).
Speed
Because the pages are generated from the closest server in the CDN, there’s less distance for the data to travel. This means that pages are incredibly quick, often loading in under one second. Check out the likes of the Leonardo DiCaprio Foundation and Pan Macmillan (which run on JAMstack) to see what I mean. Pretty mind-blowing, right?
Security
By serving pre-rendered static HTML, all potential connections to web applications or database servers are removed. As the dynamic functions are handled with APIs and client-side JavaScript, JAMstack sites are a lot less exposed compared to traditional CMS platforms. And since a JAMstack site is just a collection of static sites, the risk of hacks is reduced significantly.
Reliability
With the complex work done during the build process, JAMstack sites have fewer moving parts by the time they’re ‘ready to go’. This means that they are extremely stable by default. As the content is distributed via a CDN, the chances of encountering technical issues decrease. There’s no need for server updates, maintenance or patching (unlike a traditional CMS).
Scalability
For a sudden or gradual increase in users, because your deployment is essentially a stack of files that can be served anywhere, it’s just a case of serving those files in more places. So in practice, this means that as requests are handled by the CDN, more visitors are able to view your website at the same time without affecting the user experience.
Closing remarks
You’ve made it to the end of the article. Congratulations! Hopefully you’ll feel a bit more clued up on what it means to have a JAMstack website and the benefits that come with it. Investing the time and energy into building a JAMstack website can pay dividends in the long run, so it’s really worth the effort.
Thanks for reading.
José Lucas
Technical Content Writer at Cobiro
Follow our journey
We’re on a mission to enable all kinds of business owners to be successful online. And we believe in equal opportunities for all, no matter their size or resources. That’s why we created the only free JAMstack website builder on the market. No coding or installation required. Check us out.
