JAMStack FAQ – What? Why? And Why Not?

Introduction

Before we jump to the FAQ part, I want you to know that no matter if you are running a web shop, or just need a website to present your product, a modern web development and JAMStack is here to help you out with most of the performance issues yo've been facing so far.

Seems like the need for SEO efficiency, speed, customized user experience, and faster development have never been so important, as the pandemic events pushed and forced a lot of local businesses to search for digital transformation, or even the entire business renovation.

And JAMStack is here to make things easier.

Thanks to rapidly changing technologies, we are able to adapt them to any kind of business and solve most of the problems we were struggling with much easier and faster.

People ask more and more questions around JAMStack, so we decided to create an FAQ, and present JAMStack more deeply to help you learn, understand, and find the possibilities of adapting it to your own business.

What is JAMStack?

The term JAMstack is a mashup of JavaScript, APIs, and Markup, but you don’t always need JavaScript to build static pages (f.e. Hugo or Jekyll are not JS)

As a web development architecture, it’s there to make scaling up your website easier, as it means you’ll no longer have to rely on a web server and all the dynamics during the request / response cycle will be handled by… ok, JavaScript let’s say.

All server-side databases or database actions are then abstracted into reusable APIs and accessed through HTTPS.

Finally, Markup is something that should be pre-built at deploy time.

Benefits of using JAMStack

JAMStack brings a lot of benefits, starting from being totally free and unlimited in user experience customization, through speed up until SEO and safety.

Let’s list and explain them shortly.

Pros of using JAMStack

Great User Experience - JAMStack websites are static, which means they are extremely fast and work with a blink of an eye. All the data are prerendered, so you don’t have to wait for any response from the server in order to display data.
Better Google Ranks - a static nature of JAMStack is making it extremely easy for Google spiders to crawl through the website. And that's what Uncle G. loves and favors.
Total Safety - again, being static means being disconnected from the backend, in other words, there is no room for pirates, as they will only face the picture of a ship, not the ship itself.
Traffic Resistance - JAMStack websites can be served entirely from CDN (Content Delivery Network) so there is no need for additional logic or workflow. Using CDN means also simpler deployments, built-in redundancy and awesome load capacity.
Headless Integration - if you haven’t heard of headless integrations, it’s a new way of improving integration with backend platforms like ecommerce platforms, or CMSes. If you own a webshop, or work with a content management system, and you are becoming frustrated by the lack of editing options, JAMStack is here to help.
Many Ready-to-use Features - thanks to declarative nature, you can easily copy and use many features and solutions that have been built already, which can significantly improve the development time.
Cheap and portable hosting - hosting static pages is much cheaper, and sometimes even free! More that that, you can also use any hosting you like, as well as change the hosting provider with no effort.
Easier Maintenance - A static website doesn’t require an administrator and 24/7 service to keep it running.
Copy, Paste, Edit - frameworks like Gatsby, or Next.js are built upon React - a component based JS library, that is making it absolutely easy for you to scale up and down your pages. Building a website is more like building blocks now. Simply copy, paste, edit.
Developers love it - in other words, it's been made to make work easier. It will be much easier to find JAMStack developers, as developers want to work with hot technologies.

Cons of using JAMStack

Is JAMStack a definite web development answer? Well, no. At least not yet.

There are still few areas that needs attention, or improvement.

One of the main one is manual rendering, yet Next.js framework already nailed it, by building a hybrid of SSG and SSR.

However, there are still other things to be aware of:

Coding is required - If you want to make any updates on your websites or landing pages, you will need the help of a qualified developer.
Some Technologies are not plugin friendly - great user experience and total freedom in customization means mostly that you won’t be able to simply use a plugin. All the work needs to be coded. Gatsby is an exception here.
Not really dynamic friendly - Static pages are perfect for text and images. If you want to use any dynamic features on your website, it will demand more resources, as dynamic features are not the part of JAMStack architecture.
If you know more, leave it in the comment please!

Difference between JAMStack and Traditional Workflow

Traditional Workflow	JAMstack workflow
Development Developer writes the website code, and then ships it to the server.	Development Using Static Site Generator (SSG), the developer writes the code and then ships them to the CDN as rendered HTML.
Render Server renders HTML based on the developer’s templates and content from the database.	Pre-rendered HTML The CDN then serves the rendered website.
Display The client visits the website and waits till the website is rendered and then provided to him.	Display Your client can visit the website that is already rendered without waiting for the server.

Popular JAMStack Static Site Generators

Gatsby.js

GatsbyJS is an open-source React-based, GraphQL powered static site generator (SSG).

In other words, it combines the very best of React, Webpack, React-router, GraphQL, and other front-end tools, creating one single solution that web developers love to use.

GatsbyJS was also nominated for the hottest web development technology in the world in 2020.

P.S. Not to show off, but Pagepro has been proudly showcased and became the official Gatsby.js Agency Partner.

Next.js

Next.js is a JavaScript framework that enables you to not only build web applications using React, but also superfast static websites.

It’s all thanks to Automatic Static Optimization that makes “static” and “dynamic” become one.

This feature allows Next.js to build hybrid applications that contain both server-rendered and statically generated pages.

Wait, what?

P.S. Pagepro is also a Next.js agency!

Hugo

Hugo is another leader of the most popular open-source static site generators built on Go.

With its amazing speed and flexibility, Hugo makes building websites fun and easy.

More than that, Hugo supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins.

Best technologies to build a JAMStack website

There are a number of JAMStack technologies you can choose from.

First, you need to choose tools and technologies for:

Front-end layer
Headless CMS
Hosting and deployment

Front-end technologies

Gatsby.js	Next.js	React.js	TypeScript

Headless CMS

Contentful	Sanity	Strapi	WordPress

Hosting and deployment

Netlify	Vercel	AWS	Firebase

Best use cases of JAMStack

Who wouldn’t want a super fast, light, and SEO friendly website?

There are plenty use cases for JAMStack, and we do believe it can be used pretty much everywhere.

But at the same time, we also know there are some specific markets that demand all the JAMStack blessings much more.
These are:

eCommerce Shops - JAMStack helps them engage customers and position their products easier in Google ranks, which can ultimately increase conversion rates. Custom storefront integrated with Headless eCommerce can bring significant results.
Custom Landing Pages - JAMStack helps you forget about being late with ad campaigns. It enables you to build custom landing pages much faster and easier.
Software & SaaS - A product website is in fact an app’s business card. Now it’s possible to make a great first impression by making it flawless and fast as the blink of an eye.