What is Jamstack?

Building a good website is hard. Keeping it running despite traffic surges and security threats is harder.

A promise of improved website performance, increased scalability, and better security based on pre-rendered static websites await with Jamstack.

So how is all of this possible?

Let’s dive into Jamstack, its origins, and why we’re excited about what it means for the future of building websites.

At its core, Jamstack is a modern web development architecture. JAM refers to client-side JavaScript, reusable APIs and prebuilt Markup.

Jamstack allows you to improve site performance by rendering out a set of static pages at build time and deploying them to a content delivery network (CDN). Your site couldn't be any faster, all content is served from the CDN edge with no time required to render pages. It's like the most aggressive caching system.

Since the whole site is just static files on the CDN, there are basically no limits to scalability. Also, security vulnerabilities are greatly reduced since the servers which process the content are not exposed to the public internet. It even offers protection from other disaster scenarios. Server filled with log files? Database down? Accidentally pushed some broken code changes? These things may all mess up your internal processes. They might disrupt your CMS. But your public site doesn't care - it's just static rendered pages and your customers care more about the user experience than your 'internal problems'.

Basically, frontend developers' cellphones are still going to go off - but it's code yellow instead of code red.

So what do you need to make Jamstack work?

There are four key parts of Jamstack: A static site generator, a headless Content Management System (CMS), a CDN/ADN (like Netlify), and services (like Stripe).

The core of Jamstack is really the static site generator. It's the key piece that moves the rendering of your presentation layer away from request-time (when a visitor requests a page), to build-time.

Static site generators like Gatsby, Hugo, Nuxt and NextJS are some of the most popular options, but there is a treasure trove of options that await you. These SSGs are also commonly used with 'frontend' javascript frameworks like React, Angular, and VUE for templating, but you can find an SSG for almost every programming language and framework.

Next up. The headless CMS, the UI and authoring component of the Jamstack equation.

A headless CMS provides everything you need to manage, store, curate and deliver deliver assets and structured content over API, and then it gets out of the way, simplifying the development process. The headless approach provides freedom and complete control over how you build your experiences, and how you deliver them.

So, static site generator, check.

Headless CMS and content APIs, check.

Now, where do you host it all?

Simple, a content delivery network such as Netlify, Cloudflare, Vercel, Fastly, or Firebase allows you to handle the delivery. Some of them provide increasingly more goodies to help with the deployment, such as automatically building and deploying automatically whenever code changes or whenever content changes.

Finally, how do you give a static website a "backend", to make things happen?

Jamstack sites rely on web services and their APIs. These are often SaaS solutions like Auth0 for authentication, Stripe for payments, Mailchimp for signups, Shopify for commerce or Slack for messaging. But you can also connect them to your own in-house web services too.

Early on, Jamstack took root because it offered a quick and affordable development workflow for solo developers and small teams to solve deployment in a reliable way. It appeals to web developers because it offers the same kind of empowerment that has been a hallmark of web technologies since the beginning. It lets people do more, with less reliance on expensive and complicated tech stacks. Developers like the DIY nature of assembling their own Jamstack that fits their needs best. And it doesn't hurt that Netlify has been promoting the concept with a series of high-profile conferences.

But is it just a hype wagon, or is there something to it?

While it's not a good fit for every project, the value is solid. This looks like a trend that will have a lasting impact on how digital experiences are built and delivered. We’re even seeing brands combining Jamstack with headless commerce to realize the benefits of jamstack ecommerce.

In 2018 large enterprises started joining in. There was critical mass of developer experience, there were enough successful example cases - like Smashing Magazine itself - and people realized that those same 3 key benefits, speed, scalability & security, were very relevant for enterprise applications.

Another driving force has been the growing understanding of the importance of speed to the conversion rate of digital experiences.

BBC found they lost an additional 10% of users for every additional second their site took to load.

Page speed even contributes to search engine rankings.

With Jamstack, people talk about getting 100's on Lighthouse speed tests by default.

However, while the Jamstack approach brings the goods for developers, it has some downsides for content authors and marketers.

Whenever you make a code or a content change, the static site generator needs to render out the pages again and push those to the CDN. This build-time can take a while. For a large site it could take 30 minutes or more. Nobody wants to wait for a content change.

This is a hot topic in the Jamstack scene and the emerging solution is 'incremental builds'. The latest versions of the generators are smart enough to know which pages are affected and only render the affected pages, resulting in fast builds.

Due to its reliance on Headless CMS, a Jamstack implementation can also suffer from a poor authoring experience. Authors work in forms, disconnected from the actual experience. There is less control, and there are limits on what marketers and authors can do - without needing to call in the developers.

This problem is being solved too. Purpose-built tools like TinaCMS and Stackbit provide some inline editing support for non-technical users such as marketers and content editors. Meanwhile in the past year several CMSs, like Magnolia, have connected their rich visual WYSIWYG page builders directly to headless webapps like SPAs. This means that developers can go fully Jamstack and headless, and still provide content teams with all the benefits of a visual content editing experience: instant preview, working in-context, and true choice and control over the digital experience.

At Magnolia, we are pretty excited about where Jamstack is going, and the part that we can play. Jamstack's DIY appeal is a great match for our 'best of breed' approach and our focus on integration. And Magnolia's content authoring capabilities and customizable UI make it a great choice for getting the most out of static sites.

We've had customers using Magnolia in Jamstack projects since 2018. That's why we sponsored the Jamastack virtual conference 2020. 

The Jamstack conference was a two-day celebration of the next generation of web development. An opportunity for the Jamstack community to connect and discuss ways to push the boundaries of tomorrow’s web architecture.

As part of the conference, I conducted an online workshop on creating great authoring experiences for static sites -  a deep dive into making your React, Vue, or Angular apps fully editable and easy to manage for your content authors and marketing teams.

So, let's go fully headless, leverage the power of static sites and Jamstack for the enterprise, and empower your marketers to deliver exactly what your customers are looking for.