Everything You Need to Know About JAMstack
If you’re a developer, you’ll have heard of JAMstack. This new architecture standard for web is changing the way we think about workflow and is making huge waves in the tech industry. Essentially, the JAMstack approach gives users a pre-generated page where the backend isn’t involved during requests.
This makes for super-fast sites as pages are generated during the build phase. If you’re new to JAMstack, we’ve got you covered. Read on for our full JAMstack guide where we’ll be explaining everything you need to know.
What Is JAMstack?
JAMstack is an architecture that allows you to build static pages, with more complex functionality integrated with APIs. The ‘JAM’ stands for JavaScript, API, and Markup.
Let’s take a look at each of these in more detail.
J — JavaScript
All dynamic functionalities run on client-side. These are all handled by JavaScript using framework, libraries, or vanilla JavaScript.
A — API
All server-side and database operations are abstracted into reusable APIs. These can be either custom-built or through third party services.
M — Markup
Templated mark-up is prebuilt at deployment. This is usually done using a static site generator (SSG) or a separate build tool for web apps.
Is JAMstack Right for Your Site?
JAMstack is great for projects that don’t need complex dynamic functionality. It’s perfect for things like blogs, information pages or even e-commerce sites. However, if your site has big dynamic features like forums, things can get a little complicated.
5 Benefits of Using JAMstack
JAMstack was made to create faster, more secure websites. There are huge business benefits to the architecture — these are our top five:
1. Faster Performance
JAMstack sites are ultra-fast. This all comes down to using a combination of pre-rendering, static HTML and Content Delivery Networks (CDNs).
2. Tighter Security
By separating the frontend and backend, there’s no need to worry about a server or database. By design, JAMstack architecture offers fewer points of attack.
3. Easier Scaling
It’s hard to compete with JAMstack when it comes to scalability. Thanks to the straightforward delivery of web pages through CDNs, scaling is easy.
4. Increased Stability
The end product is static HTML delivered via CDNs. With fewer complex servers and databases, there’s a much more stable architecture in play.
5. Better Developer Experience
Separating the data source from the applications gives a great choice of technologies for developers to use. Any framework, library or service can be used to build a JAMstack site.
How JAMstack Works
JAMstack works by generating the browser markup using SSGs. Templates, data and API data go through SSGs and outputs pre-rendered static files. The files can then be placed directly onto a CDN as no server is required. Then, on client side, the page can connect to additional API or serverless functions to provide additional, dynamic functionalities. Essentially, a JAMstack site is a dynamically generated, static site.
Choosing the Right Approach for Dynamic Content
When It comes to handling dynamic content, there are three approaches you can choose from.
Approach 1: During Build Phase
One of the simplest ways to make static content dynamic is during the build phase. The API would be responsible for fetching the latest content, and you can trigger build as often as needed to update a page.
Approach 2: On Client Side
This approach works to ‘hydrate’ static markup and makes it interactive using JavaScript. This allows for interactive features like comments or searches to be forwarded to additional serverless functions, APIs and services.
Approach 3: Splitting Your Project
For pages that can’t be pre-built, splitting your project is the way to go. This approach would benefit an e-commerce site where pages like a user profile or cart page will need to be dynamic, but others like product pages can be completely static.
JAMstack Architecture
This is a basic example of how JAMstack architecture might work. Here developers are using Gatsby as an SSG along with React for templates. After doing a git push command to the master branch in the repository, webhook will trigger Gatsby to build on Netlify. After that, the changes are deployed automatically to Netlify’s CDN. The same happens when a content team makes any change in a headless CMS — here we’re using Contentful. On client side the page is connecting to additional APIs — Typeform for forms, Disqus for comments and Auth0 for authentication service.
Where to Learn More
We hope this overview has given you a good intro to the basics of JAMstack. To learn more about the architecture, head to the list of learning resources on the JAMstack site. Or if you have a specific question, you can join the JAMstack community on Slack and Twitter.
