Jamstack isn't a new ideology; it's been about for a while and has gained momentum over the last few years. So instead of delving deeper into what is Jamstack, why not get our hands dirty and go into the few reasons why you should consider it!
What is Jamstack? Benefits and Best Practices for Web Developers
Jamstack is an architecture created to make the web faster, secure, and easier to scale. It's a methodology for building a site and builds upon several tools and systems. Jamstack's flexibility is precisely why developers love it and why I thought it would be best to address what is Jamstack for aspiring developers.
Less moving parts
As a developer, I want to ensure I deliver solutions to clients that match their requirements. If a client is updating a site once every few months, why do we need a big WordPress/Statamic/Perch build for something that remains static 95% of the time? So, we have a few options technically that'll allow us to get static performance:
- Use a management system with a caching plugin, so the CMS builds an HTML cache of the projects. WP Super Cache and Statamic Static Caching all do this, and it works great! However, we have to host the software on a good hosting platform, and with that comes great responsibility to ensure the software is up to date, well maintained and that any plugins are up to date.
- Build directly in HTML/CSS. As developers, this is a luxury we'd love to have, so we can keep control over every line of code and ensure clients don't end up ruining semantics, design or usability. However, as we know, clients need to be able to update their site to stay relevant, so this is a less than ideal option.
What if we could hybrid this approach? What if we could make sure a management system is purely managing content, and the front-end is an HTML/CSS updated when we update content; this is where Jamstack excels. Let's explore:
- We can pull data from any API using a site generator like 11ty. As the site is pre-built, we don't have to install plugins or create software that caches it. From an efficiency point of view, we can build the site at any time, so it can be rebuilt once a day, via a webhook or whenever you like; this lowers API requests and only updates the site when needed.
- Decoupling the front-end from the backend means we've got a more secure foundation, more stable, lighter weight, and ultimately a lot faster. If your CMS or a third-party API goes down, the build will fail, and the older cached version is stable. That's awesome.
- In situations where you need to run server functions, most platforms hosting Jamstack websites have serverless functions. These are small microservices that have a particular service. In the past, I've used these to connect forms to CRMs. But the possibility is endless! You could run a Jamstack eCommerce that connected to Stripe to power a shopping cart (see example).
- And what about a CMS? Well, we could use a variety of data sources. I've built websites powered via AirTable rows to pull in paginated available jobs. But in a more typical approach, I generally use Netlify CMS or Sanity. Netlify CMS is a git-based CMS that connects to your repo and directly looks at the source to link data to fields; this means you could plugin Netlify CMS at any point, and it'd just work. Magic. Sanity is more of a headless CMS where we pull in data via the API and then output it where we want it (see example).
The Jamstack developer experience
I've been using 11ty for the past year, and it's brilliant. It gives me as a developer a layer over the top of HTML/CSS to re-use code and allow my code to scale. But the critical thing is that it only ever does what I tell it. I feel in complete control of the build output and can manipulate it however I like. I can pull data from almost anywhere, use it to my heart's content, and include it in templates. I loved this in Perch. It allows me to separate the front and backend and clearly understand what is getting pulled in. If I need to replace a data source, the data is clear on where it comes from and can be a seamless transition.
Why is this better than a typical CMS (e.g. Statamic/Craft/Perch)?
The beauty of this stack is that you could, in theory, power a Jamstack site with these products and keep all the benefits of Jamstack. Imagine in a few years, and the client wanted a particular feature on another CMS or if a CMS was unsupported. In a typical build, we'd have to start from scratch and rebuild the site on the new platform, as they all have their front-end techniques, be it Nunjucks, Antlers or Perch's templating language. With Jamstack, we'd use the headless APIs that these provide and pull the data to the front-end. We can swap out the dependency and keep control of our front end.
Most of my clients are small to medium businesses that update their sites regularly. They don't need a big CMS initially; they don't need everything that comes with Statamic for a 10-page site. They want a site that works, performs and can grow with them. With Jamstack, you could start with Netlify CMS to power a blog, then migrate this to a larger-scale CMS if needed. No front-end rewrites, just a data swap and a few updates in the templates we've created.
Out of the box
Products come and go. WordPress has been out for a long time, and I've never been a fan. Why? Because out of the box, I generally have to install a minimum of 5 plugins before I'd be happy to ship. A caching plugin, a security plugin, and an editor plugin; this is mad! Out of the box, I want a product that will deliver 100 scores on Google Lighthouse that I can start building instantly. A combination of 11ty and Netlify allows me to launch a git versioned, fully hosted, HTTPS secure, state-of-the-art cache and cache invalidation site; preview builds/domains within minutes. Statamic would require a server setup, git integration turned on, static caching configured, and this is all time lost as a developer. I'd rather spend that time delivering better quality, technically well-built sites while saving the client time and money.
The Jamstack benefits:
- Better performance
- Improved security
- Less code
- Lower risk of failure
- More control over every line of code.
- Less server maintenance as platforms like Netlify handle everything technically for you, with great support and world-class hosting. I've also used Vercel, which is fantastic too!
- A website that you know will scale. It's a static site at the end of the day.
I was initially sceptical as I didn't understand what Jamstack is and what it could offer my clients and me, but I'm now fully invested in Jamstack and won't be reverting anytime soon. Are you looking to get started with Jamstack or want a beginners guide? I regularly post on Twitter about all things Jamstack!