WTF is JAMstack
What is JAMStack?
JAMstack stands for Javascript API Markup. It’s a modern way of building a web app based on client side technologies that use Javascript, and APIs to extends its functionality like pulling content or authorization. And a prebuilt Markup
For example here I have a Gatsby website that pulls the content from Contentful.
Gatsby is the javascript part because it’s built with javascript it also Provides the M part which is the prebuilt Markup once that is loaded by the user Gatsby will lazily load React and turn my website into a fully fledged React App.
The API part here is Contentful I am using Contentful's API to pull content and render it at build time in my website but since a Gatsby website is a full-blown React App at the end of the day you can call APIs also at runtime like Authentication.
What is not JAMStack?
A monolithic server-run web app that relies on a server technology like Ruby, python or Nodejs. What is also not JAMstack is a website that is baked
Instructor: [00:00] JAMstack stands for JavaScript API and markups. It's a modern way of building web apps based on client-side technologies that uses JavaScript and APIs to extend its functionalities. For example, pulling content, and finally, a pre-built markup.
[00:16] Here, we have a GatsbyJS project. Gatsby uses React under the hood, which is a JavaScript framework. With these tools and frameworks, we can get a better developer experience, like hot reload. You can see here, the page is changing whenever I change something in the code, without needing to rebuild every time.
[00:39] To use APIs in Gatsby, we use source plugins that will load the data from any service, like Contentful, and plug it into your website through GraphQL. In this project, I already added the Gatsby source Contentful plugin.
[00:56] Now, we can render a list of lessons from my Contentful space into my Gatsby website.
[01:02] First, let's import GraphQL from Gatsby. Now we create the query. To do that, we simply export a variable. We call the Gatsby GraphQL. Finally, let's render the data. You can see here the data coming from Contentful render in Gatsby. Finally, when we build this website to production, it will produce a static HTML website.