Jamstack Attack! Static Sites, Dynamic APIs, Killer DX
Tags: javascript, webdev, ux, api
Published: 2020-05-18 20:44:23


**What is the Jamstack and why is it on the rise?**
****

![](https://d33wubrfki0l68.cloudfront.net/0e10c97634da0242be91bec4f6a198a78dd68f99/b5de5/img/jamstack-full-logo.svg)

![“JAMstack” Google search interest, starting in 2017. (Google Trends)](https://paper-attachments.dropbox.com/s_E810DF5FAE5FFA4D7307B42FACD8F21D10C5A8E7942911504C9F1478D92A8711_1588311003204_Google+Trend+of+JAMstack.png)


## What is the Jamstack?

The **Jamstack** (originally stylized **JAMstack**) is an approach to building web applications that extends the ideas of “static sites” to emphasize their true dynamic potential. Originally introduced by Matthew Biilmann in 2016, then popularized by [Netlify](https://www.netlify.com/) and other companies in 2017 onward, the Jamstack approach continues to grow in popularity thanks to its design for rapid scalability, performance, security, and relatively easy developer experience.

The **JAM** in Jamstack is an acronym that stands for: 

- JavaScript
- APIs
- Markup
![Image credit: Colby Fayock, What is the JAMstack and How Do I Get Started? (freecodecamp.org)](https://www.freecodecamp.org/news/content/images/2020/02/jamstack-breakdown-3.jpg)
_Image credit: Colby Fayock, What is the JAMstack and How Do I Get Started? (freecodecamp.org)_


**JavaScript** in the client browser handles dynamic interaction using a set of reusable **APIs** to abstract away server-side (backend) operations. An app often combines the use of many API services, each tailored toward a specific operation set (more on this later!). **Markup** is the technology used to serve prebuilt websites as static files to end users without delay.

Key facts and features of the Jamstack:

- JavaScript web applications
- APIs for dynamic services (no reliance on specific servers)
- Pre-rendered pages (Markup, including HTML/CSS) 
- Deployed via CDN

Key advantages:

- Highly Scalable
- Highly Performant
- Highly Secure
- Easy to implement


## Don’t Call Them Static Sites

“You may have already seen or worked on a Jamstack site! They do not have to include *all* attributes of JavaScript, APIs, and Markup. They might be built using sites built by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another [static site generator](https://www.staticgen.com/). *The thing that they all have in common is that they don’t depend on a web server.*” —[jamstack.org](https://jamstack.org/)

Jamstack apps don’t rely on web servers. So how are they able to behave as if they do? 

APIs are the secret sauce that allow a Jamstack application to go beyond being a “static site.” Web developers can use relatively simple HTTP calls to endpoints maintained and scaled by other providers, thereby abstracting away all of their server-side concerns. Developers don’t need to worry about the meticulous work that goes into building a reliable and performant backend, and can instead focus on their front end and user experience. They can make a static site remarkably dynamic with extended functionality. Developers are able to take full advantage of best-in-class API solutions offered by the industry.

API services used in Jamstack applications often include:


- E-Commerce APIs (e.g. [Snipcart](https://snipcart.com/blog/jamstack))
- Content Serving APIs (e.g. [Contentful](https://www.contentful.com/r/knowledgebase/jamstack-cms/))
- Search functionality via third-party services (e.g. [Algolia](https://www.algolia.com/))
- Custom serverless functions
- Custom data stores and data queries




## Developer Experience: Will Your API Jam?
![Your API Developer Experience: Will it JAM?](https://paper-attachments.dropbox.com/s_E810DF5FAE5FFA4D7307B42FACD8F21D10C5A8E7942911504C9F1478D92A8711_1589348000167_will+it+blend+api+dx.jpg)


Developers building their site with Jamstack naturally take on a microservices approach to building out their server-side functionality and are eager to make use of existing APIs that fulfill their requirements. In the early prototyping and exploration phases, the search for suitable APIs includes sampling third-party API services. 

To get developers to adopt and enjoy *your* API, you can’t just tell them about features, you need to show them you care about their experience with your documentation. In the case of a bad or missing documentation, the crowd will inevitably seek alternatives that offer a better experience. 

If you’re looking for some helpful guidance, Andy Trattner sat down with me in April to write up his [4 Steps to Implementing Stellar Documentation](https://blog.readme.com/4-key-questions/) for the ReadMe blog, while API Engineer Jon Ursenbach told us all about [How to Make Your API More Enjoyable to Use](https://blog.readme.com/how-to-make-your-api-more-enjoyable-to-use/). Documentation owners will find these articles help them to feel more confident they’ve properly considered their developer experience.


## More About the Jamstack

Hungry for more Jamstack knowledge? Here are some sweet resources to help you get started:


- [awesome-jamstack](https://github.com/automata/awesome-jamstack)
    - An extensive list of awesome Jamstack resources and APIs, curated on GitHub.
- [jamstack.org](https://jamstack.org/)
    - Netlify’s Jamstack resource site.
- [jamstack.training](https://jamstack.training/)
    - Tamas Piros’ free course catalog (itself a Jamstack app!).


## Jam On!

The Jamstack development phenomenon shows little sign of slowing down and now you know why: fast, scalable static architecture made dynamic thanks to APIs. With an easy developer experience free of server-side concerns, we’ll continue to see its popularity rise as the age of cloud computing continues. Jam on! 


----------
(This article was originally published for [ReadMe](https://blog.readme.com/jamstack-static-sites-dynamic-apis-killer-dx/))