The Magic about Jamstack and Sanity.io

What is Jamstack and why does it get so much attention? And what is Sanity.io's role in all that?

Sascha Gros
Sascha Gros October 27th, 2021 · 6 minutes to read
Photo by Almos Bechtold on Unsplash

Imagine you want to have a marketing website that allows you to publish your own content. Many people would immediately think of Wordpress. But you also want it to be extremely fast. Not impossible with Wordpress, but add a couple of plugins and that goal is less and less realistic. Now you also want your content to be available for other platforms and integrations. Could be done with Wordpress as well when adding a Headless CMS WordPress plugin.

That could be the end of this post. Go Wordpress, go. But of course it is not the end. While we have been using Wordpress for quite a while for the sake of being convenient and known to many people, we really hated the way of creating and providing content. Most Wordpress templates use plugins like Elementor or Visual Composer which are supposed to make content editing easier but are always a pain to use, especially if you care about content and not about its presentation so much. And that is exactly the point, why we decided to move away from Wordpress:

We want to keep our content separate from how it is presented to our audience.

Now, there is a multitude of different tools out there that support you in this endeavor. But this post is not so much about comparing the different tools and why one is better than the other. This post is about Jamstack in general and why we fell in love with Sanity (disclaimer: we are not paid or associated with Sanity in any way). So let’s dive into it.

What exactly is a Jamstack? JAM is an acronym for Javascript, API and Markup and the term was initially coined by Netlify co-founder Mathias Biilmann. The order of appearance is a bit confusing in my opinion, that’s why I will explain the three parts in a different logical order.

  • The API is responsible for storing and delivering our content to the world. We are talking about well-structured, unstyled content that can be retrieved and used by a multitude of consumers.
  • The markup gives a visual appearance to our content. So instead of building websites dynamically at run-time, everything is pre-rendered as a static HTML file. To be able to do so, you will most likely make use of a static site generator like Eleventy or Hugo.
  • The sugar on top is Javascript. It is responsible for the dynamic parts of our website and should be used only to make it more interactive.

Now stack API, Markup and Javascript on top of each other and you will have a JAM stack. I know I know, technically it would be a AMJ stack, but have you ever tried to say that?

image

Photo by Dan Cook on Unsplash

There is no ONE Jamstack

Jamstack is an architecture pattern not a specific tech stack. When I first heard about it, I saw some parallels to the popular MEAN stack, but while MEAN is an acronym that references specific frameworks, Jamstack is more about methodology than about technology. That is why initially it was a bit hard to get started. There are a lot of API alternatives and different static site generators, so you can get easily lost in figuring out the individual parts. We finally settled on Sanity and Eleventy and we are very happy with it.

In this post we won’t talk about Eleventy in detail but introduce Sanity. With Sanity you can freely define the data entities and their inherent structures that you want to use, when creating your content. Sanity then also generates a beautiful GraphQL API for you that you can use to retrieve your content. Alternatively you can use Sanity’s GROQ query language which adds some additional features especially when it comes to filtering and mapping your data. We have stuck to GraphQL so far since it is what we already know and we only miss GROQ’s additional features rarely.

The central piece of Sanity’s platform is Sanity Studio and it is the part, where content editors will spend most of their time. It shows a list of available content types (like for example authors, categories and posts), then it shows all available items for each of those content types and finally it also shows the editor where you can edit those items. The UI is extremely clean, you feel at home immediately and it even allows for real-time collaboration. So whenever a colleague of yours is editing some content in Sanity Studio, you can directly see it while you can still keep working on your own content. Have you ever worked with multiple people on a Google Docs document? Then you will be familiar with this concept and appreciate it a lot.

All the content that you create will be stored inside Sanity’s database called Content Lake. You will normally not interact directly with that database (even though there are use cases for this like creating a commenting engine) but instead you can create all content in Sanity Studio and then retrieve it via the API. But it might be good for you to have heard about Content Lake at least once and if you are working for a corporation, you might need to dig deeper to see if Sanity’s way of storing data is compliant with your data protection policies.

The third part is the developer tools. They consist of a bunch of npm dependencies scoped with @sanity and a basic React setup that lets you define your data structures in so-called schema files. It also allows you to add plugins and configuration to your Sanity Studio version. When you change your local schemas, plugins or configuration, you can first run and test the changed Sanity Studio version locally to see, if it suits your needs, and then you can deploy it to the Sanity servers to have the same Sanity Studio version under the URL of your choice.

Wait, what?

image

Photo by Lennart Nacke on Unsplash

Yeah, you are customizing your Sanity Studio in a Node.js project on your local machine and whenever you are ready with that customization, you can deploy it to your live version. How awesome is that?

As a full stack developer I have worked on a lot of frameworks and platforms in my life and I never came across something as convenient and professional as the Sanity platform.

Summary

With Sanity you have the complete freedom to model your content the way you envision it and there are almost no limits in how this content can be structured. While we are using Sanity to run our blog, there are a multitude of use cases that we can think about right now, how we could use Sanity in the future.

There is one tiny drawback though: as of now there is no option to run your own Sanity instance on-premise, so you do not have full control over how and where your data is stored. Anyway, the Sanity team has put a lot of effort into being GDPR compliant and also takes data protection and compliance very serious.

And with that the only thing left to say for today is:

Thank you folks at Sanity for this amazing piece of technology and keep up the great work!