What's Jamstack? And why should you care?

No images? Click here

Hey there!

Jamstack is a lot better than the jam sandwiches you ate as a kid 🥪

It's better than jamming with your mates! 🎸

...and it's better than Jameson! 🥃 (although that's not hard)

So what is Jamstack?

It's a modern way to build websites and apps that have better performance. 🙌🏼

Like, ✨WAY✨ better.

Specifically, Jamstack stands for JavaScript, APIs, and Markup.

And it's worth knowing about, because Jamstack allows you to build things like an e-commerce site, SaaS applications or a personal blog with the benefits of:

Let's give you an example:

Here we have the traditional, old, boring website: Yawn. 😴

In the traditional web, the client (that's you browsing the web) requests data from the server, which then fetches it from the database, and displays it on your screen.

Voila! 🪄 Website goodness.

The problem is, in the process of doing that, it's fetching a whole bunch of things that it doesn't need, there are lots of layers, and there's a delay in getting the information from the server.

That means traditional web = slow & poor performance. Boo! 🤮

Geez, ok, yes, like everything... it depends on the setup, application.. blah, blah... I get it. Can I just keep going now? 😋

Look how boring it is 👇🏼

Now, let's look at the NEW, EXCITING Jamstack web: Hooray! 🥳

In the NEW web, data is pre-rendered and served via a CDN (Content Delivery Network), then made dynamic through JavaScript, APIs and serverless functions.

In other words: It delivers a static website with only what it needs to. It doesn't have to go fetch everything at once and it can be super-fast. Oh, and dynamic. ooo!

So essentially: Jamstack = great performance!

Wow, so pretty 😍

And that means, instead of doing this:

Your customers will be doing this:

much better!

Okay, sure, but what else can it do?

I'm sold. How do I do this Jamstack thing, specifically?

The good news is, you've probably done most of the hard work, and are pretty familiar with the technologies involved. There's no specific criteria like "you must use Angular and Node!", it's more of an architecture thing.

Use HTML, CSS, React, Wordpress or whatever, and then use something like Gatsby to deliver it (FYI, that's pretty much our setup for SitePoint).

You will need to adapt a few things though to help your workflow; so if you're like "I need to know more. Tell me MOAR!" 🦁 you can read our intro to Jamstack here and you can find a list of tools to get up and running here.

If you want more of a guided ticket, you can check out some of our content like:

JAMstack: Silly Name. Serious Stuff

Do we really need this JAMstack thing? And what even is it? In this session, we’ll demystify the buzzwordy term, and explore how the approach to simplifying the technology stack can lead to shorter development times, with better performance and greater security.

How to Build Your First Static Site with Gatsby

Thinking about getting on the Jamstack bandwagon? If your answer is Yes, then Gatsby, one of the hottest platforms around, could be just what you’re looking for. In this tutorial, Maria shows you how to use Gatsby to get up and running with your first simple static site.

Happy Learning!

The SitePoint Team