What is Jamstack?

by Christopher Zimmermann, Product Manager at Magnolia
May 14, 2020 | 7 MIN

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.

Jamstack Defined

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 protections 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 - its just static rendered pages and your customers are blissfully ignorant of your 'internal problems'.

Basically, developer's cellphones are still going to go off - but its code yellow instead of code red.

So what do you need to make Jamstack work?

The Key Components of Jamstack

There are four key parts of Jamstack: A static site generator, a headless 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 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 & VUE (& now Angular) 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 your content over API, and then it gets out of the way. The headless approach provides freedom on how you build your experiences, and how you deliver them.

What to know more about Headless CMS?

See an overview of Magnolia's headless advantages and the difference it will make for your projects.

Discover more

So, static site generator, check.

Headless CMS, 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 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 site a "backend", to make things happen?

Jamstack sites rely on web services. 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.

Why All the Hype?

Early on, Jamstack took root because it was a quick and affordable path 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 have 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.

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 some downsides for content authors and marketers.

Downsides

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. Meanwhile in the past year several CMS, like Magnolia, have connected their rich visual WYSIWYG page builders directly to headless SPA. This means that developers can go fully Jamstack and headless, and yet still provide authors with all the benefits of a visual editing experience: instant preview, working in-context, and true choice and control over the digital experience.

Jamstack and Magnolia

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, 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 are proud to be sponsoring the Jamstack virtual conference on May 27-28.

The Jamstack conference will be 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 will be conducting an online workshop on creating great authoring experiences for static sites. It will be a deep dive into making your React, Vue, or Angular apps fully editable and easy to manage for your content and marketing teams.

So, I hope to see you at the Jamstack virtual conference (It's free, and has a great lineup!), and come swing by our virtual booth at the event if you have any questions or want to chat. And consider registering for our workshop if you ready to really dig in for half a day.

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.

Christopher Zimmermann

About the Author

Christopher is a product manager at Magnolia with an emphasis on developer experience & productivity. He helped introduce the ‘light development’ paradigm and is now focused on headless, hybrid headless and making integrations easier to implement. While trained in Physics in university, the buzz and wild west openness of software development drew him to a career as a programmer in product companies, creative web agencies, freelancing and startups. Christopher is an outdoors enthusiast who got started with backcountry camping in the USA, but is slowly getting the hang of finding a coffee and cake in a rustic hut at 3000+ meters altitude in the Swiss Alps.

See all posts by Christopher Zimmermann