TABLE OF CONTENTS

What is Jamstack? – A Guide For Digital Business

Mariusz Marcak
By Mariusz Marcak

Understanding what is Jamstack and why using it

Before diving straight into what is Jamstack, let’s get some context.

One of the most important advantages of humankind was always the ability to adapt to changes fast. Or at least faster than other species.

It’s pretty much the same in the world of digital business.

The only difference is that the “environment” here is more technologically complex, and without at least a decent knowledge foundation, it’s super easy to get lost, miss many opportunities, and do things the wrong way, even without knowing it.

And this is why we love to think that your website is a kind of a leaving creature, that evolves and adapts to your clients’ needs, and constantly changing online environment.

And Jamstack enables you to do just that – adapt fast.

So this guide has been made for two main reasons:

  • To explain the core complexities of the web environment, so you can feel more comfortable with your decisions
  • show you how to make a digital business more efficient from the technical point of view.

On top of that, I will show you how understanding the fundamentals of modern web technology can make your business more flexible and become more adaptable to constant changes.

Finally, this guide has been made for business people to feel more comfortable while speaking with technical people – to discuss and negotiate technical work.

I will try to explain as clearly as possible how things in web development work, and how you can get yourself closer to your potential clients, by using one of the most popular web philosophies – the Jamstack.

So, what is Jamstack, actually?

What is Jamstack – Introduction to digital business

In fact, Jamstack is nothing really new. It’s just a new brand name for the concept of static pages that are lightweight, fast, and thanks to that, they can be also really SEO friendly. And that has been here already for a while.

However, all the modern tools and inventions around Jamstack gave birth to many great improvements in the area of building static pages. And thanks to that, we can now use all the static page blessings (like performance, enhanced user experience, or SEO advantages) easier and more efficiently.

Why Jamstack was needed?

Simply put, efficient digital marketing should bring more visitors to your website, and transform those visitors into clients.

It sounds simple, but if you ever had a business based on a website, you probably know what kind of challenge this is.

That being said, you may notice that people are now more demanding than ever, and they also became highly impatient. In other words, they want websites to load in a blink of an eye, or they are pretty much ready to leave.

But you don’t have to take my word for it – just check some stats:

  • Almost 70% of customers admit that the page load speed has a significant impact on whether they will buy from an online retailer or not (Unbounce).
  • Almost half of the website visitors expect a page to load in two seconds or less.
  • If a website takes more than 3 seconds to load, 40% of website visitors will abandon it.

Moreover, customers are not alone in this demand – as of June 2021, Google included site speed as one of the most critical ranking factors through Core Web Vitals metrics.

Youtube video explaining Core Web Vitals and SEO

Website sucess factors

However, fast page load speed alone isn’t enough to win over customers and Google bots. 

There are still few more things you need to take into account, such as:

  • SEO (getting high positions in search results for keywords related to your business)
  • User experience (how visitors feel about browsing your pages)
  • Security (data security and hacker attacks protection)
  • Speed and performance (after June 2021 update, these are even more important ranking factors)
  • Scalability (to make sure if something on your website goes viral, you are ready to handle the traffic)
  • Future-proof (you may become future-proof for years to come)

As a result, by taking care of those points, you may significantly improve:

  • Organic traffic (traffic coming from Google search results that you don’t have to pay for)
  • Conversion rate (the percentage of visitors that completed the action, like: filled the contact form, made an order, signed up for a newsletter)
  • General number of leads (people who are open for your next sales move)

However, addressing all these things at the same time became a huge challenge. 

Who can benefit from using Jamstack?

Almost every single online move and activity can be recorded and measured nowadays, and to take care of each part of the digital marketing optimization becomes just too complex for one person.

And this is why people search for full-pledge solutions that are able to simplify and minimize the need for diversification. In other words, to keep as much control over the optimization as possible, with the least amount of effort and people involved.

Following that, there are many people who can benefit from using Jamstack in the company, like:

  1. Business owners – as they want to make their business overall more competitive, well-structured, and simplified.
  2. CTOs – that want to work with reliable and secure tools, as well as keep their developers satisfied by working with fresh technologies.
  3. Marketers – so they can use modern tools to provide a much better experience and deliver higher value more efficiently.
  4. eCommerce managers – to optimize the customer journey, increase engagement, and ultimately increase their conversions easier.

Reason for a change

Not so long ago, building a website often meant having everything in one place without additional integrations and tools, which was highly beneficial for business owners. However, few problems started to appear.

  • As the number of visitors and size of the database grew, websites started to slow down.
  • If even one small thing broke down, the entire website could stop working correctly.
  • The visual (frontend) layer was strongly connected to the backend layer = limited customization options and poor data security.

Such websites were built using the approach called monolithic, and it can help us understand why Jamstack became so popular and how the need for it evolved so naturally.

A bit of history: Monolithic applications as a standard

Monolithic structure (or architecture) was a standard for building web applications for many years. It consists of three main elements: 

  • User interface – it’s what users see and interact with, 
  • Business logic – it handles the exchange of information between user interface and database,
  • Database – it contains all necessary data for a website or application (like user data). 

These elements are deeply interconnected (coupled), so such a structure is called a monolithic application.

Drawbacks of monolithic architecture

Although it sounds great to have everything in one place, many people actually found it to be limiting and sometimes even challenging.

Here are some of the most important limitations and challenges of monolithic approach:

Changing any part of your website may be tricky

As all parts of your website are connected, making changes to one part, i.e. part responsible for payments, may cause errors in, for example, the database.

Hard to customise the way you like it

If you are building a webshop, you may have some specific features in mind you would like to use. However, choosing a monolithic application means that, sometimes, you will get features you won’t use, ever, yet you often have to pay for them in a package. There is also a high probability that some features you actually want will be missing, and getting them means paying even more.

In other words, on famous platforms, there’s almost always something you have to choose between and compromise. As a result, it won’t be a bespoke solution fitted precisely to your needs, but rather a solution for the masses, and in order to customize it efficiently, you may be forced to invest more anyway.

Unnecessary features causing damages

As mentioned above, monolithic applications may offer a variety of features and functionalities that, first of all, you don’t need, and second, could negatively affect the performance of a website or a webshop.

Limited flexibility

In this case, flexibility means quickly adapting to users’ needs and answering market signals. However, in a monolithic approach, doing so requires changes to both front-end and back-end layers simultaneously (as they are interconnected). Also, monolithic often means using themes and templates that are hard, or even impossible to customise.

Performance issues

As your monolithic application grows over time, so does its size and database. Consequently, it may lead to performance issues. Even if your developers work hard on improving performance or page load speed, sometimes doing so remains ineffective.

Poor scalability

In this case, scalability means readiness for high traffic. In other words, if something goes viral, you may face some severe downtimes or performance issues. It can even stop working during such traffic spikes as the hosting server isn’t ready for it.

Security issues

Dynamic sites (as in the case of monolithic ones) are by default more vulnerable to attacks than static sites. It’s because of direct connections to the database and because the front-end layer is connected to the back-end.

These drawbacks forced developers and other concerned people to look for a better solution. As a result, they created a way to break monolithic apps down into smaller parts called microservices

Monolithic vs Microservices

The main difference between monolithic applications and microservices is responsibility for a specific job to be done.

While monolithic logic has many responsibilities simultaneously, microservice is responsible for one specific thing only. By being laser-focused on that, it can become much more efficient in doing this one specific job.

Think of it this way – back in the old days, there was only one doctor in town that knew something about the lungs, the impact of garlic, how to stop bleeding, deliver a baby, and how to remove a tooth. That’s a monolithic approach. 

And although he was still able to help many people, he couldn’t help those who required a much deeper understanding of a specific part of the body. In other words, you probably prefer to have a qualified laser-focused neurosurgeon, for serious brain surgery.

And that’s exactly how microservices works. They laser-focus on one particular job to push it and get the results that a monolithic approach couldn’t even dream of.

On top of that, another great benefit of microservices is that they can be easily reused and implemented by different third-party tools, platforms, etc.

And the idea behind Jamstack is exactly covering one specific part of a website extremely well – the frontend.

Jamstack and microservices

Using Jamstack to build web applications means decoupling the frontend from the backend. 

It allows for more modular architecture as Jamstack replaces monolithic applications with the possibility to use the approach of mixing different APIs and microservices. In fact, you can call Jamstack a microservice-based architecture.

Let’s think of an example.

If you have a web shop, any single API connection can be treated as a microservice. For example, one API connection could be responsible for invoicing, the other one for importing products, and another one for managing customers’ data. So instead of creating one extensive database, you can now create multiple smaller services responsible for one specific job.

Traditional approach vs headless approach

To keep things simple, it should be quite enough to have a look on how the development process looks like in both cases.

Creating monolithic applications or websites means using traditional approach. Creating Jamstack applications or websites means using a headless approach. It’s called headless because the frontend (head) is decoupled from the backend (body).

Here’s how it works:

TraditionalHeadless
DevelopmentA developer writes the website code (both frontend and backend) and then ships it to the server.A developer writes the code separately for the backend and frontend, so making and applying changes in the frontend layer, doesn’t affect the backend.

Now, after shining some light on the context, let’s get back to Jamstack.

What is Jamstack? – Short Explanaition

Before jumping to the benefits, best use cases, and all other things, we would like to explain some technical fundamentals of Jamstack, so geek alert, but not too much.

There was a day when JAMstack was considered as a mashup of JavaScript (the code), APIs (the website’s infrastructure), and a Markup (pre-rendered final result).

Not anymore.

Netlify (a Jamstack creator) went away from the technical JAM acronym and made Jamstack more of a development philosophy instead of a name based on some technical features.

In other words, you don’t have to use JavaScript nor API to build a Jamstack website.

So, to make it simple, Jamstack is a web development architecture that enables you to build static pages and websites based on microservices methodology. It also gives you all static advantages, like great performance, high traffic resistance, fast load speed, safety, great SEO, etc.

Thanks to caching everything in a Content Delivery Network (CDN), Jamstack sites run smoothly every time.

If you want to go deeper and get a better understanding of Jamstack from the technical point of view, we ran a great and interesting interview with Colby Fayock – one of the top experts in the Jamstack field.

Youtube Video about What is Jamstack?

When to use, and when not to use Jamstack?

So, one of the most frequently asked questions is: Should I use Jamstack?

And although we love to think that you can use Jamstack in every single case there is, we are also humble enough to admit it’s not entirely the truth.

Yet, many business cases prove that using Jamstack just makes perfect sense and brings many of its technical advantages to become business advantages as well.

If you got a bit tired with reading, I’ve also made a dedicated video on When to use Jamstack, and when not.

youtube video about when to use jamstack?

When to use Jamstack?

For example, if you want to build:

  • eCommerce websites – your Jamstack pages will definitely help you engage your customers (page speed and better UX) and rank higher in Google search results (SEO & UX, and oh yes, Core Web Vitals). Consequently, it may lead to a conversion rate increase.
  • Software and SaaS websites – the first impression matters a lot, so making it great by building a Jamstack website that will load in a blink of an eye – sounds effective!
  • Custom Landing Pages – you can use unlimited customization and super speed to enhance UX, and get better organic and advertising results, as well as combine it with proper CMS to make it super easy for the marketing team to build and optimize such pages.
  • B2B companies – B2B customers want someone they can trust with their money. Period. They don’t just buy stuff, they buy assets that they hope will pay them back, so building trust around those assets seems to be a reasonable direction. Your trustworthiness and professionalism can be elevated with a clean, and modern look, that will raise your chance to be chosen.
  • Online services – Although Jamstack was mainly associated with the concept of static pages, it becomes more and more dynamic over time, so using Jamstack for websites like news portals, (crypto)currency, stock exchange websites that use real-time data became a great idea.

We are going much deeper into the details and pain points of a specific business case in our dedicated article on when to use and when not to use Jamstack.

When not to use Jamstack?

It might not be a good idea to choose Jamstack if:

  • Your budget is limited – using Jamsatck means hiring skilled developers, which is costly in both, hiring internally, and outsourcing option. On top of that, if you want to rebuild your website to Jamstack, you should be aware of how complex this project is, and how many fundamental changes would have to be done.
  • You are not ready for big changes – In most cases, choosing Jamstack means also choosing new CMS, new look, rebranding, etc. As I’ve mentioned, such endeavour means lots of changes, is costly, so it is also a great idea while doind rebranding, or rebuilding the marketing strategy.
  • You don’t have enough technical knowledge (or budget to pay for it) – coding is required as well as working with APIs to use full Jamstack potential. Yes, you can connect a website to CMS (which makes updates painless), but it still requires skills. If you don’t have JavaScript or React knowledge, you should hire someone who has.
  • You are just starting out – Jamstack is not beginner-friendly when compared to such solutions as WordPress. Therefore, if you are a small company that wants to start a business online, something easier like WP might be a better option.
  • You prefer using plug-ins – coding knowledge and specific skills are required to build Jamstack websites, and except for Gatsby, most of the technologies don’t allow for using ready-to-use plugins to add new features without much coding.

Pros and cons of using Jamstack

Although Jamstack comes with many great advantages, there are also few features that make it less effective in specific areas.

Let’s list some of the most important pros and cons of using it.

a table with pros and cons of Jamstack

Three main reasons to choose Jamstack

User Experience

One of the most important benefits of using Jamstack (and reasons to choose it) is the possibility to build a great custom user experience. In a world full of look-alike websites and shops, it’s a great way to differentiate your business from the competition.

Also, it’s not only about building a good-looking site – it should be also user-friendly from a page speed and performance point of view.

Ask yourself – would you come back to the place where you have had a terrible experience? Like waiting in a line in the shop with a huge line, 10 checkouts, and only one of them working?

The same rule applies to websites and webshops – the first impression will either encourage you to or discourage you from coming back. 

If the overall experience is terrible, it’s less likely you will come back. 

User experience is also important for Google and its crawlers. They even gave some suggestions to implement the user experience of our website or online store.

Essential things for Google:

  • Easy to read, relevant and helpful content
  • Responsive design
  • Fast page load speed
  • Clear and well-organised site architecture

Search Engine Optimisation (SEO)

There are few reasons why Jamstack sites are SEO-friendly.

First of all, Jamstack means getting complete control over the website’s content and structure, and consequently, over the SEO possibilities. Adding custom metadata like page titles, meta descriptions, and alt text is easy. It helps Google crawlers with reading and indexing your website’s content.

Another thing that helps with indexing is that Jamstack websites are static – they consist of HTML files. Thus, it solves many typical problems with improving a website’s SEO.

Google loves Jamstack because of one more reason – its high performance and fast page load speed. As a result, such websites are rewarded with higher rankings in search results. Consequently, it leads to more visitors, leads, and sales.

Performance and speed

In general, the page load speed and the performance of a website are:

  • Important SEO ranking factors (and they will be even more critical after the update of Core Web Vitals metrics planned in June 2021).
  • Affecting user experience (positively or negatively).
  • Impacting conversion rate (positively or negatively).

Let’s retake a look at some stats to highlight the importance of speed and performance.

  • Almost 70% of site visitors admit that page load speed has a huge impact on their buying decision (Unbounce).
  • 47% of site visitors expect that a website will load in two seconds or less.
  • 40% of site visitors will abandon a website if they need to wait more than three seconds till it fully loads.

As Jamstack websites pre-generate specific pages at a build time, it increases the page load speed and performance.

Besides that, all pages are stored on a Content Delivery Network closest to the user that visits a website. It also increases the page load speed.

a graph with reasons to use Jamstack by pagepro

Other benefits (PROS) of Jamstack

While the three main benefits of Jamstack include user experience, SEO, performance, and speed, it has so much more to offer for digital business websites.

  • Better Google rankings – a static nature of Jamstack makes indexing Jamstack websites extremely easy. And it’s something that Google rewards with higher rankings.
  • Total safety – static websites have no direct connection to the backend, so the data is perfectly safe.
  • High traffic resistance – When something goes viral, you want to be ready for a high traffic. Jamstack websites can be served entirely from CDN (Content Delivery Network), so there is no need for additional logic or workflow. Using CDN also means 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 integrating the front-end layer with backend platforms like eCommerce platforms or content management systems. It gives online store owners or CMS users more editing options.
  • Future-proof – technology is ever-changing, and using Jamstack gives you peace of mind that you will keep up with these changes in years to come.
  • Reusability – thanks to the declarative nature of Jamstack, you can easily copy and use many ready-to-use features and solutions. As a result, it can significantly improve the development time. There are also many ready-to-use features that can help you kick off the project faster.
  • Cheap and portable hosting – hosting static pages is much cheaper than hosting dynamic pages (sometimes it’s even free). Also, you can use any hosting and change it effortlessly.
  • Easier maintenance – a static website doesn’t require an administrator and ongoing control.
  • Omnichannel approach (works on any device) – Jamstack websites adapt to any device and screen size. This way, you can convert both desktop and mobile users.
  • Copy, Paste, Edit – frameworks like Gatsby or Next.js are built upon React – a component-based JavaScript library. React makes scaling up and down pages easy. As a result, building a website is more like playing with LEGO blocks.
  • Developers love it – one of the main goals of Jamstack is to make the development process easier. Therefore, there will be many JAMStack developers you can choose to work with, as they naturally like and want to work with hot technologies.

Cons of Jamstack

While it may seem so, Jamstack is not all rainbows and unicorns. Apart from many benefits, it also has a few cons and limitations.

  • Coding may be required – If you want to make any updates on your website or landing page and it’s not connected to the headless CMS, you will need either some coding knowledge or the help of a qualified developer.
  • Some technologies are not plugin-friendly – great user experience and total freedom in customisation have their cost – you won’t be able just to use any plugin you want. All the work needs to be coded, except for Gatsby.
  • Generating preview takes time – Jamstack sites are static (with dynamic features) but still, so you need to “build” it each time you make a change. If your website is kind of big, it can be a real pain. However, Gatsby and Next.js creators are working on a solution for that.

If you want to go deeper, we made an article with a more comprehensive list of Jamstack pros and cons.

Examples of Jamstack websites

Although some may believe that Jamstack is a good choice for any website – that’s not entirely true. As we already mentioned in the best use cases section, it’s best to use Jamstack for eCommerce, landing pages, and SaaS and software websites.

Below, you will find some real-life examples from these categories.

Examplex of eCommerce Websites

Butcher Box

Butcher Box is an online store that offers meat delivery subscription services.

Butcher Box Jamstack website
Source: ButcherBox

Victoria Beckham Beauty

Victoria Beckham Beauty offers makeup products of premium quality.

Victoria Bekcham Beauty Jamstack website
Source: Victoria Beckham Beauty

Deliveroo

Deliveroo is a food delivery app that helps with ordering food from restaurants and takeaways.

Deliveroo Jamstack website
Source: Deliveroo

Examples of Landing pages

Sharpen

Sharpen is a Visual Studio extension for adding C# features into the existing codebase.

Sharpen Jamstack website
Source: Sharpen

Right From Basics

Right From Basics is a place for developers to learn and prepare for their next technical interview.

Right from basics Jamstack website
Source: Right From Basics

JS Minds

JS Minds is a place where React and Jamstack developers can find great projects. Also, ambitious companies can hire great React and Jamstack developers fast. The main page is an excellent example of a simple landing page that has one job – deliver the information needed.

JS Minds Jamstack website
Source: JS Minds

Examples of Software and SaaS Websites

DreamHost

DreamHost offers web hosting.

DreamHost Jamstack website
Source: DreamHost

Stackery

Stackery is a serverless platform that helps developers with designing, developing and delivering modern apps.

Stackery Jamstack website
Source: Stackery

SendGrid

SendGrid is a customer communication platform that helps business owners drive engagement and growth. 

SendGrid Jamstack website
Source: SendGrid

Examples of Finance Websites

Binance

Binance is a financial platform to sell and buy cryptocurrencies online.

Binance Jamstack website
Source: Binance

PayBright

PayBright offers payment plans that allow you to break down the purchase cost into a series of biweekly or monthly instalments.

PayBright Jamstack website
Source: PayBright

PC Financial

PC Financial is a kind of a payment program that earns you points for each dollar you spend.

PC Financial Jamstack website
Source: PC Financial

Examples of Healthcare Websites

Teladoc Health

Teladoc Health delivers, enables, and empowers virtual care services that span every state in a person’s health journey – from wellness and prevention to acute care to complex healthcare needs.

Teladoc Health Jamstack website
Source: Teledoc Health

Headspace

Headspace is a new interactive experience that will help you “Unwind Your Mind”. It helps you with things like stress-relieving meditations or relaxing wind downs and bedtime stories.

Headspace Jamstack website
Source: Headspace

COVID KPI

It’s an interactive chart presenting important COVID-19 data, like the number of cases and tests made per country.

COVID KPI Jamstack website
Source: COVID KPI

Examples of Education Websites

The Mezzofanti Guild

This site is all about language learning. It helps you discover new strategies for simpler language learning.

The Mezzofanti Guild Jamstack website
Source: The Mezzofanti Guild

MongoDB Developer Hub

Knowledge Hub for MongoDB Developers.

MongoDB Dev Hub Jamstack website
Source: MongoDB Developer Hub

DataCamp

A platform for learning Data Science and building data skills online.

DataCamp Jamstack website
Screenshot: DataCamp

Best Jamstack technologies

Using Jamstack requires choosing technologies that will be responsible for the front-end and back-end layers. We gathered some of our favourites below.

Our recommended Front-end technologies

  • Gatsby JS – open-source React framework with a massive ecosystem of Plugins, Themes, and Starters that boost the development process
  • Next.js – open-source React framework that supports both static site generation and server-side rendering
  • React JS – a JavaScript library used by developers to build user interfaces and a base for different frameworks like Gatsby and Next.js
  • TypeScript – open-source programming language built on top of JavaScript, which works great with Node.js and offers IDE support 

Our recommended Headless eCommerce platforms

  • BigCommerce – SaaS eCommerce platform following the latest digital trends which can be used for headless eCommerce
  • Magento (Adobe Commerce) – an eCommerce platform dedicated to bigger players, which offers many rich features, headless architecture and various third-party integrations
  • Saleor – an open-source headless eCommerce platform that puts GraphQL first
  • Shopify – SaaS eCommerce platform which allows vendors to sell anywhere in the world with many features like Point of Sale (POS) system

Our recommended Headless CMSes

  • Contentful – API-first content management platform to build digital experiences with features like localisation and personalisation
  • Sanity – flexible content platform built for developers by developers. It allows for collaboration and customisation in real-time to build data-driven content applications
  • Strapi – an open-source headless CMS built with JavaScript which offers things like customisable API or internationalisation
  • WordPress – the most popular CMS globally, which powers more than 40% of websites in the world. Thanks to Jamstack, WordPress websites get a new life by becoming headless
  • Prismic – it’s a Content Management System and a tool for editing online content. It lets you choose your technology, framework, and language and then easily manage your content.

If you hesitate which CMS you should use to your Jamstack project, read our comprehensive article on the comparison of different Jamstack CMSes.

Examples of Jamstack Static Site Generators (SSG)

  • Gatsby – one of the first and most popular new-age static site generator, yet Gatsby lately provides also dynamic, optimized websites and a cloud platform.
  • Next.js – at the moment, probably the most interesting tool for building both static, and dynamic pages. Definitely the one loved the most by developers that brings a lot of great possibilities to Jamstack and website optimization.
  • Hugo – fast framework written in Go (aka Golang) for building sites with content-supporting features like unlimited content types and taxonomies or customisable URLs
  • Jekyll – simple Ruby framework for building personal blogs or organisation sites
  • VuePress – static site generator based on Vue written by Evan You for keeping (technical) documentation in order

Best Jamstack Static Site Generators: Next.js vs Gatsby JS

Next.js and Gatsby JS are absolutely the most popular static site generators used to build Jamstack websites.

However, it’s important to know the similarities and differences between these two, as they are both do a great job, but in different use cases. Let’s make the final decision easier.

Table with advantages of Jamstack static site generators - gatsby and nextjs

First of all, both are for building performant and SEO-friendly websites.

Next.js and Gatsby are also:

  • Using React.js
  • Following the Jamstack architecture
  • Simplifying web development (as they provide a boilerplate – a fixed structure to follow during the development process)
  • Selected by big players like hulu, TikTok, InVision (Next.js) or Impossible Foods, Figma, SendGrid (Gatsby)

These are the similarities. Now, let’s jump to the differences.

The main difference is that Gatsby JS is just a static site generator, while Next.js offers both server-side rendering and static site generation.

Static site generation (SSG) means that the HTML is generated at build time and reused on each request.

Server-side rendering (SSR) means that the HTML is generated on each request.

Other differences:

Next.jsGatsby JS
Data handlingDevelopers can choose how to approach data fetchingYou need to use GraphQL
CommunityA quite small showcase of websites built with Next.js (around 100 websites)Agency program supporting agencies using Jamstack
A quite big showcase (more than 1000 websites)
Plugins, themes, extensions, integrationsEncourages developers to build everything from scratchMany ready-to-use plugins

Best use cases of Next.js and Gatsby JS

It’s best to choose Gatsby JS if you want to build:

  • Corporate website
  • B2B or SaaS product website
  • Personal blog
  • Digital agency website
  • Small eCommerce website

You can also find some more great Gatsby JS websites examples here.

You can also read more in our Gatsby JS FAQ.

It’s best to choose Next.js if you want to build:

  • Large multi-user website
  • Client-side rendered application (SPA/MPA)
  • Big eCommerce website
  • Web portal

And, more great examples of Next.js websites here.

Also, you can read more about Next.js here.

If you want to learn more, you can read our article in which we compared Next js vs Gatsby JS. Or, if you don’t feel like reading, you can watch our video on the same topic.

Youtube video about Gatsby vs Nextjs comparison

Jamstack alternatives

Jamstack isn’t the only choice out there. Below you will find short comparisons versus its alternatives such as WordPress, SPA and MERN.

Jamstack vs WordPress

WordPress is an example of monolithic architecture, while Jamstack is an example of headless architecture, and that’s the main difference between these two. The good news is that businesses that enjoy using WordPress don’t have to give up using it, as it pairs well with Jamstack.

Other differences:

  • Jamstack websites are more secure as there is no direct connection to the database or other sensitive data (because the front-end layer is separated from the back-end layer)
  • Sites built with Jamstack don’t rely on a server as they are pre-built and serverless
  • Static sites (aka Jamstack sites) are faster than dynamic sites by default
  • WordPress handles everything needed for a website to work, so you don’t need additional technologies or solutions
  • WordPress is less demanding than Jamstack when it comes to managing content or required technical knowledge

Speaking of WordPress, you can use it as a great headless CMS!

To learn more about it, you can read out article about the pros and cons of using Gatsby in WordPress projects or, you can also read our guide on how to migrate from WordPress to Jamstack.

You can also watch my video about Jamstack vs WordPress and other low-code alternatives.

Youtube video about Jamstack vs WordPress and other low-code alternatives

Jamstack vs SPA

A Single Page Application (SPA) is a web application or website that rewrites the current page with new data instead of loading the entire page from scratch. Thus, it feels like browsing a native application.

To put it simply, SPAs are Jamstack sites, while not all Jamstack sites are SPAs.

The main difference between these two is that Jamstack sites consist of pre-rendered HTML files while SPAs load content when users request it first.

Jamstack vs MERN

MERN stands for MongoDB, Express, React, and Node.js, and these are the technologies that make up the stack. On the contrary, Jamstack doesn’t limit developers when it comes to choosing technologies to use. Furthermore, it doesn’t require using particular libraries or frameworks as a must. Instead, Jamstack refers to JavaScript, API, and Markup.

Jamstack for eCommerce

As you already know, Jamstack can be used not only for corporate websites or landing pages but also for building online webshops. Such a way of eCommerce development is getting more and more popular as it takes advantage of the headless architecture a lot.

Before jumping to the pros and cons of Jamstack for eCommerce, let’s define what headless commerce is.

What is headless commerce?

In general, headless is a concept of separating the front-end layer from the backend layer, but keeping them in sync with each other. 

You can use headless architecture not only to build corporate websites or personal blogs but also for more complex projects like webshops. Jamstack allows for creating a fully customized front-end (aka storefront) without the necessity of creating the entire webshop from scratch. That’s the case if you already use an eCommerce platform like Shopify or WooCommerce.

While the back-end is separated from the user interface, they are connected through API (Application Programming Interface). That way, webshops owners can focus on developing and improving customer experiences without worrying about breaking the store’s functionalities.

Going with headless eCommerce is a great choice if you want to manage content efficiently and sell your products whenever you want. You also gain complete flexibility and control over things such as content, custom code, user interface, and templates.

Pros of Jamstack for eCommerce

Building a webshop is way more complicated and demanding than setting up even the most advanced website. Some Jamstack benefits are common for every industry, but let’s look at them specifically from an eCommerce perspective.

  • Ability to sell products everywhere – which results in higher revenue. With Jamstack, you can display and sell your products on multiple platforms like Amazon or Facebook. Also, you can manage all digital sales channels in one place instead of managing them separately.
  • Improved time to market – which results in time and money savings. Jamstack offers reusable and premade components that boost the development process. Consequently, it leads to faster time to market, which means savings in both time and money.
  • Developer experience – which results in faster development. This benefit is strictly connected to the previous one as thanks to the developer experience, time to market is improved. Also, Jamstack gives developers the possibility to use APIs so webshops owners can stay with their favourite platform like Shopify. Thanks to that, developers can focus solely on the front end development. It cuts not only the development time but also the amount of money spent.
  • Unlimited customisation – which results in greater user experience. A digital world is full of lookalike webshops offering the same shopping experience. With Jamstack, you can build a truly custom storefront to adapt your webshop to customers’ needs and expectations. Thanks to that, you will undoubtedly stand out from the competition.

Best eCommerce platforms for Jamstack

BigCommerceMagento (Adobe Commerce)SaleorShopify

Comparison of eCommerce platforms for Jamstack

BigCommerce

BigCommerce is a SaaS eCommerce platform that aims to help merchants at every stage of growth. It’s dedicated to people with no coding experience or even web design skills.

Pros and cons

ProsCons
Many features are available at entry-level planAbandoned cart functionality is quite expensive
Multi-currencyAnnual online sales limits
Third-party real-time shipping calculationsNo shipping discounts
No additional transaction feesNo RSS feed support
Built-in product review functionalityAPI support available only on the enterprise plan
Unlimited number of staff accounts
GDPR compliance
Free 15-day trial

Pricing

StandardPlusProEnterprise
Price/mo$29.95/mo$79.95/mo$299.95/moCustom pricing
Annual sales limit$50,000$180,000$400,000Negotiable

If you exceed the annual sales limit on the Standard and Plus plans, you need to upgrade your plan.

You can check the detailed pricing on BigCommerce’s website.

When to use BigCommerce?

BigCommerce is a great choice for shops of all sizes, especially those from one of the following industries:

  • Apparel & Fashion
  • Automotive
  • CBD
  • Food & Beverage
  • Health & Beauty
  • Manufacturing

Magento (Adobe Commerce)

Magento is an eCommerce platform dedicated to bigger players with many rich features, headless architecture and various third-party integrations.

Pros and Cons

ProsCons
Free Community versionNot beginner-friendly (steep learning curve)
Product recommendations functionalityIt can be quite costly
Customer segmentation and personalisationSlow time to market
ERP integrationNot easy to implement
Cloud delivery (access to the latest software version, infrastructure improvements and functionality)
Integrated B2B functionality
Optimised performance (AWS-based environment)
You can sell and distribute on Amazon directly from your store

Pricing

As pricing is not available publicly, you need to contact sales first.

When to use Magento (Adobe Commerce)?

Magento is a good option for mid-market businesses with growing tendency, and is truly great choice for big enterprise businesses that demands a lot of customization.

Saleor

Saleor is a headless eCommerce platform empowering online store owners to deliver blazingly fast, dynamic and personalised shopping experiences.

Pros and Cons

ProsCons
No front-end limitationsNot many third-party integrations
SDK (connecting to API is easy)A small number of developers
Multi-device accessibilityRelatively immature platform
Flexible product types
Unlimited product attributes
Multi-warehouse inventory
Multi-language and translations module
Global taxes are covered
Upselling with machine learning

Pricing

There are two options:

  • Open-source – it is and will be free forever to host on your servers
  • Cloud – monthly pricing that depends on the number of monthly orders

Let’s check the pricing for 1,500-2,500 monthly orders on three plans (Startup, Pro, Enterprise).

StartupProEnterprise
$695/mo$1,795/mo$6,795/mo
1,500 orders/mo2,500 orders/mo2,500 orders/mo

You can check the detailed pricing on Saleor’s website.

When to use Saleor?

Saleor is a great choice regardless of whether you are a small, midsize or enterprise-level retailer with a physical or digital inventory.

Note that Saleor was built with headless commerce in mind.

You can also read more about Saleor here.

Shopify

Shopify is a SaaS eCommerce platform, similar to BigCommerce, that’s widely popular worldwide.  You can choose it regardless of the stage you are at because Shopify offers solutions for beginner stores and well-established ones.

Pros and cons

ProsCons
Abandoned cart functionality available on all plansProduct reviews functionality requires installing an app
Great for dropshippingSome of the key functionalities also require installing a third-party app
US, Canadian and EU taxes are calculated automaticallyUsing third-party solutions won’t help you with avoiding transaction fees
Multi-language versionsBuilt-in email marketing functionality is pretty basic
Multi-currencyMulti-currency selling only possible when using Shopify Payments
Built-in email marketing toolBeing GDPR compliant requires an additional app
Many third-party apps to choose fromProfessional reporting is available only on more expensive plans
Android and iOS apps to help you with store management
Free 14-day trial

Pricing

Shopify LiteBasic ShopifyShopifyAdvanced ShopifyShopify Plus
$9/mo$29/mo$79/mo$299/moCustom pricing

You can check the detailed pricing on Shopify’s website.

When to use Shopify?

Shopify is an excellent choice for shops of all sizes and industries, regardless of whether you are just starting out (consider Shopify Lite then) or have a well-established online store that needs some improvements.

We can also learn about using Shopify as a headless only.

Jamstack FAQ

You may still have some questions about Jamstack, so we gathered the most popular ones below together with answers to them.

How can I migrate my website to Jamstack?

There are two ways of doing so.

You can:

  • Move your entire website with content, database, etc. to Jamstack
  • Move to Jamstack but continue using your favourite CMS or eCommerce platform if it provides API

To prepare for such a migration, we recommend you to read our questionnaire.

What is the cost of building a Jamstack website?

It depends on the complexity of a particular project. 

  • A simple static website will cost around £4k – £8k
  • Project involving UX/UI design will cost about £6k – £30k (depending on the size of the project)
  • A big and complex project may cost around £20k – £80k

How much does it cost to maintain a Jamstack website monthly?

You can host your Jamstack website even for free using GitHub Pages or Netlify if it’s a personal blog or small business website. However, as your website and requirements grow, so will the cost of maintaining the website.

The monthly cost will also depend on the third-party tools you want your website to be integrated with.

How long does it take to build a Jamstack website?

As in the case of the cost, it also depends on the complexity of a particular project.

  • A simple static website may take from 1 month up to 3 months
  • More complex websites can take from 6 months up to 18 months (or more)

It also depends on who you will work with.

Working with an experienced Jamstack agency will cost you more, but the project may take less time than in the case of working with a Jamstack freelance developer.

What skills should Jamstack developers have?

First of all, a Jamstack developer should be a great, detail-oriented frontend developer with decent experience in JavaScript. Even better if it comes with a great knowledge of the React library as Gatsby and Next.js are built upon React.

At Pagepro, we use:

  • React.js
  • Gatsby.js
  • Next.js

Should I hire a freelancer or specialised agency to build a Jamstack website?

It depends on the particular case. If you have some Jamstack experience and just need someone to do the job, hiring a freelancer might be a great option. Otherwise, it might be better to work with a specialised and experienced agency.

How to find a good Jamstack development agency?

It’s best to find an agency that is dedicated to working with Jamstack.

However, if that’s not possible, you can also look for JavaScript or React agencies. There is a huge chance that in both cases, such an agency will have some Jamstack competencies and experience.

When it comes to Pagepro, our customers choose us after reviewing our portfolio, reading our Jamstack articles, checking Clutch reviews, and because of the positive experience from the first meeting.

But if you want to ask specific questions to make sure you hire a good one, we made a simple guide on how to choose and hire Jamstack agency.

What can a Jamstack website be integrated with?

To use your website as an ultimate sales and marketing machine, you may want to integrate it with many different tools, such as ananlytic tools, CRMs, or third-party features.

Here is an example list of tools possible to integrate with Jamstack websites:

  • Hubspot
  • CMS like WordPress
  • eCommerce platforms like Shopify and Saleor
  • Analytics tools like Google Analytics
  • Auto translation tool like Weglot
  • Internal search engine like Algolia
  • Authentication and authorisation tool like Auth0
  • Online payments platform like Stripe

More Jamstack FAQ

You will find more answered questions in our Jamstack FAQ.

Further readings

If you are a knowledge seeker, and you still search for more information to make sure you make a better decision, we could definitely recommend tons of readings, but it’s good to start from the following articles:

Still not sure if Jamstack is a good idea in your case?

Leave a Reply