loading...
Cover image for What is the JAMstack?

What is the JAMstack?

elisealcala profile image Elizabeth Alcalá ・3 min read

If you are like me, maybe you have heard the term, or maybe you are overwhelmed by the many static site generators and don't know what exactly they are and what problems they solve.

In this article I want to learn like you, what is the JAMstack, why it's so popular nowadays and what are its benefits.

The JAM

JAMstack stands for Javascript, APIs, and Markup.

Javascript handles the dynamic functionalities. You can use plain javascript or any framework you want.

APIs, the actions that you typically handle on a backend server are now abstracted into reusable APIs, accessed over HTTPS with Javascript.

Markup, static HTML files. This is prebuilt at build time, usually using a Static Site Generator.

These concepts seem very generic because they aren't applied to specific technologies like MERN (Mongo, Express, React, Node), for example.

What is not considered a JAMstack app?

Applications build on top of technologies like MERN are not considered JAMstack, that's because those apps use a web server to generate more of the HTML at runtime.

According to jamstack.org, apps built with a server-side CMS like WordPress or Drupal are not built with the JAMstack either.

In general any app that needs a server to run or it relies on a backend language it's not considered as a JAMstack app.

Content Delivery Network (CDN)

JAMstack apps don't depend on web servers, they extract markup and assets into static files that you can serve from a CDN. This provides better performance and a faster application. Now you may be asking how I can generate those static files for my app?

Static Site Generators (SSG), are exactly for that, Gatsby, Next.js, Nuxt, and many other options around, help to develop an app with your favorite Javascript framework and then generate at build time a complete structure of static files that you can serve from a CDN.

There are many options also for you to deploy those static applications, the most common ones are Netlify, AWS S3, Vercel, Firebase.

If you want to dive into static generators, and how to choose the right one for your needs, check this post.

But since all the content is static, how can we get dynamic data?

That's when the APIs part comes into play, we can make a request or handle authorization with APIs. Let's take as an example an e-commerce app, you are using a static site generator to develop the markup, but how we can get the products data?

There's an interesting concept known as headless CMS where we can store and update the products so that later we can access them into our JAMstack app. Now you may be asking how is this different from a traditional CMS like Wordpress, let's explain that.

A headless CMS makes your content accessible via Graphql or Rest APIs, it doesn't matter where your data get displayed, this headless CMS just store and then deliver that data. On the other hand a traditional CMS like Wordpress stores not only the content but the frontend part of the app to render that particular content.

Like SSG there are plenty of headless CMS options, according to your needs, choose the right one for your app.

A headless CMS is not the only way to handle dynamic data in your app, you may need custom work for your app, even if you want to store some input from the user. You may be thinking that you need a server and a database, but not exactly. We can manage those features with serverless functions and DBaaS (Database as a Service).

Advantages

Since we talked about how the JAMstack works, and what are the tools you can use, let's get right into the advantages of this way of building websites.

  • Performance: Since we served static files, these are incredibly fast.

  • Cheaper: Hosting those files is cheaper.

  • Security: With the processes abstracted into APIs, areas for attacks are reduced.

  • Developer Experience: More focused development for frontends because we remove the need to maintain a separate stack.

I hope you find this article useful, personally I'm trying Gatsby and it has been great. If you are looking for a new way to build your next app, try the JAMstack.

Posted on by:

Discussion

markdown guide
 

My implementation of the JAMStack has truly decoupled components, a great user experience, and did I mention....

...it tastes great?

 

This is a great explanation! I love using JAMstack and I try to build with it whenever I can, but it is so hard to convince clients to approve it over something like Wordpress, ever after explaining the benefits. Some people are just averse to change.

 

Don't want to read? Watch the text converted video: youtu.be/zuJpJTI4qWI .

 

It's usually good form to A) get permission first, and B) credit the author whose content you used - FYI

 

I will keep in mind next time.. Thank You

 

Wow, that's great, what tool did you use?

 

Just some video editing software.. :)

 

Superb explanation indeed. For vuejs, gridsome will be a good choice.

 

Hey, thanks. I didn't use gridsome but I'll try it.

 

Gridsome is the best for Vue sites that are truly static, but I also like using Nuxt for more complex Vue SPAs nowadays.

 

Is the JAMstack suitable for applications that get its content updated frequently? Let's say: Would be possible to build a site like reddit?

 

You certainly can, although very large applications with a lot of pages are often better to be rendered on the server side in my opinion. But a Reddit-like JAMStack implementation would probably not be too difficult. You would write a few page layouts: subreddit, post, user settings, etc., then pull in the data to be inserted in these layouts from a serverless backend. This is why JAMStack is so flexible because ideally your content is completely decoupled from its presentation layer.

 

Then, it should rebuild every time an user submits a new post? I guess that you could somehow do it incrementally, but wouldn't it be a huge bottleneck? Thanks!

No, you can still use fetch calls and other dynamic client-side code from a JAMStack app, so you don't rebuild. But this is why I say large applications are better rendered server-side though—you really shouldn't have a static site or SPA that is trying to act like a really dynamic application with a ton of client-side fetch calls.

That posts wouldn't get SEO and basically all the benefits of being static are also lost. I get it now, thanks!

 

What a great description for JAMStack! Thanks for the info Elizabeth!