An Introduction to Jamstack

An Introduction to Jamstack  - Thanks to Jonathan Pielmayer for making the cover photo available freely on Unsplash
Thanks to Jonathan Pielmayer for making the cover photo available freely on Unsplash

The Jamstack is a new approach to building websites. Sites made with this approach tend to be faster and more secure. For us, Jamstack has made building sites fun again. The JAM in Jamstack stands for JavaScript, APIs, and markup. When we “stack” these technologies together, we can create a different web experience.

How is it different?

Let’s take a look at what happens when a visitor comes to your site with a traditional CMS and then with the Jamstack approach.

In a traditional setup (WordPress on a LAMP stack), the server queries a database and combines the data with theme and plugin templates on every user request. This means that every time a visitor requests a page, their browser asks your hosting company for the page. The server asks the CMS for the page and then the CMS asks the database for the needed data. The CMS runs the returned data through its voodoo and any plugin witchcraft before finally sending the page back to the visitor. That’s a lot of steps and that’s how most of the Internet works.

With a Jamstack architecture, the site is prebuilt in a step creatively called “the build step.” When there’s a change on your site, the build step is triggered and all of your site’s pre-rendered, optimized files are deployed to a content delivery network. When a visitor’s browser makes a request, the page is immediately sent back. It’s FAST for the end-user. The tradeoff is the build step must complete before the changes are public. The length of the build process depends on the size of the site. This site builds in about 30 seconds on Netlify.

Instead of relying on the CMS (like WordPress) to render the page templates, we use a new breed of static site generators like Hugo, Gatsby, NextJS, or another. These tools handle sourcing content and building the static files for the site. We’re using Hugo to build this site.

The Benefits

Better Security. Because there is no database or server-side scripts to exploit, there’s nothing to hack. Jamstack sites are usually hosted on a content delivery network instead of a traditional server, so there’s not even FTP access. Compared to a traditional CMS, a Jamstack site is loads more secure.

Speedy, baby. Rather than building pages on the fly like a traditional content management system, pages are built upfront and then deployed globally to a content delivery network. Search engines reward faster sites. Visitors like faster sites. #winning

Scaling Is Cheaper. A Jamstack site can scale to extremely high traffic for much less money than a traditional site. This is without any loss in performance.

Developers Can Do Magical Things. Due to the static nature and separation of content management, we can very easily develop Jamstack sites locally and deploy them anywhere. Need staging URLs to see changes before they go live? It’s so easy compared to doing that with WordPress. We can easily version control the code and rollback changes in the event of goof ups or mind changing. That’s not so easy with typical WordPress. A/B testing versions of things with the Jamstack is even easy.

Things That Could Take Some Getting Used To

The Build Step. Changes can take a minute to several minutes to be published online. That’s because of the build step, during which your site is pre-rendered and then deployed to its home in the cloud.

Content management is separate. Content is managed separately from the front end of the website. There are lots of options for managing content. There’s a new breed of “headless” content management systems liked Sanity, Contentful, and Prismic. We’ve also used Directus, an open-source headless CMS. There’s a whole list of headless options at jamstack.org. Content can even be sourced from spreadsheets, Markdown files, and even (gasp) WordPress. Content can even be mixed from different sources!

Some Functionality May Require Services + Development Time. Search. Forms. Login. Database. Commerce. These things are either baked into WordPress or can be spun up easily with plugins. All of these things can be accomplished with the Jamstack but may require services or additional development. There’s a rapidly growing ecosystem of services for functionality in the Jamstack and they’re kind of like the plugins for a Jamstack site.

It’s Not For Every Project

Let’s be clear. We aren’t throwing shade at WordPress or any other content management system at all. Chances are, we are building a site or two with WordPress right now. We’ve built with Craft and like it. Drupal never was our cup of tea, but we prefer coffee anyway. The Jamstack isn’t right for every project. Sometimes requirements and deadlines mean that WordPress or another system is the best choice for the job. It’s hard to beat the comfort of working with a system you’re familiar with and the plugin ecosystem to get fast functionality. In scenarios where data changes rapidly, another solution may be the right choice.

The Google overlords reward fast load times in spades and the Jamstack brings that to the table. We are already building with the Jamstack everywhere we can. This site is one such project. It’s pretty damn fast. We’ve done client work on the Jamstack with Precision Contracting Services and Scott Cleveland Landscape Corporation and the experience of browsing fast is very nice.

Could the Jamstack be right for your next project? Maybe. Get in touch to find out. We’d love to stack your Jam. Too punny.