Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapIntegrationsTry live demo
      OverviewContent Types BuilderCustomizable APIMedia LibraryRoles & Permissions
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideosWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      InstallationConfigurationsDeploymentUpdate versionContent API
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPluginsSettings
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Integrations
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Customizable API
    • Media Library
    • Roles & Permissions
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Installation
    • Configurations
    • Deployment
    • Update version
    • Content API

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Settings
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
Back to articles

Jamstack in 2021

Jamstack in 2021
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Quadri Sheriff

Quadri Sheriff

January 11, 2021

The Jamstack in 2021

If you are a software Developer in 2021, you probably should have heard of the Jamstack and might be wondering what this new architectural approach is all about. The Jamstack is one of the rapidly expanding software architectures in the world today and has experienced a massive increase in popularity and usage over the years.

In this article, we will talk about the Jamstack and the benefits of using the Jamstack. There is also a guide to help you get started with developing with the Jamstack in 2021 and links to popular Jamstack communities and resources to aid your learning.

What is the Jamstack

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup" — Mathias Biilmann (CEO & Co-founder of Netlify).

The Jamstack, a term coined by Mathias Biilmann (CEO and Co-founder of Netlify), which stands for Javascript, APIs, and Markup, is a modern software architecture that is used for creating fast and secure websites and apps.

The Jamstack architecture consists of 3 core components:

Javascript - for handling all your website's dynamic functionalities, like API request and response calls. Javascript in the Jamstack can take on many forms and are mostly found on the client-side. Examples are frontend frameworks like React, Angular, etc.

APIs - Server-side functions and database commands are implemented with an API. The APIs are accessed by the front end with Javascript driven HTTP calls. An API based headless CMS like Strapi can also be used to manage your content and present it to your frontend with an API. You can also consume data from different external sources with an API, this reduces complexity by eliminating the need for a backend.

Markup - Static site generators and build tools are used to aggregate and pre-build markup before displaying to the end-user. Examples of static site generators are Jekyll, Hugo, Docusaurus etc.

Note: you can have a look at the top 10 static site generators article we published a few months ago.

Jamstack sites are pre-rendered, without web servers, and are served statically directly from a static hosting infrastructure or CDN. What this means is that there is no server-side code in the Jamstack, all the website static and dynamic files are generated during the build process and uploaded into a CDN or Static file hosting infrastructure. These static files are then downloaded into the browser during request time, and maybe progressively enhanced in the browser before being shown to the end-user.

Benefits of using the Jamstack

Developer experience : Jamstack websites are built without a web server or backend, this reduces complexity when building custom websites, it also allows your developers focus more on your front end and content delivery concerns. Deployment with the Jamstack is also easier than in a traditional web development stack, deployment in the Jamstack involves deploying your pre-rendered static files into a CDN or static hosting infrastructure, then serving these static files directly to your end-users during the request time.

Performance : Jamstack sites are incredibly fast. All the website’s assets are pre-rendered during build time and stored in a CDN, so when the website is served to the end-user, there are no interference or back end delays.

Security: Jamstack sites are a collection of static files served directly from a CDN during request time, no code is run during the request time, they are without any server, backend, or framework to hack, there are virtually no vulnerabilities. All your dynamic functions can also be handled by external APIs, this reduces your surface area of attack. Even though this process is not attack-proof, third party APIs are very secure and well maintained.

Cost : Jamstack files are served statically from a CDN, hosting is less expensive, fewer resources are needed for scaling hence the cost of scaling is low compared to the traditional server-side architecture.

Getting started with the Jamstack in 2021

If you are a Jamstack newbie - use the guide below to choose your Jamstack development tools.

Choosing a Headless CMS

A headless CMS provides a user interface for creating, storing and editing your content, it also provides an API for accessing your content with your front-end framework.
Strapi is a leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first.

Popular Headless CMS resources:

  • Why you should use a Headless CMS.
  • Full listing of all Headless CMS.
  • Top Headless CMS in 2020.
  • Headless CMS and beyond.

Choosing a Static site generator

The static site generator is the most important part of your Jamstack architecture, it is used to generate all your website’s static assets during build time. Popular static site generators are : Jekyll, Hugo, Gatsby.

Popular Static site generator resources

  • Full listing of all Static site generators.
  • Netlify Guide on choosing the right Static site generator.
  • Top Static site generators in 2020.
  • Simplify your stack with a custom made static site generator.
  • Strapi Static Websites

Choosing a CDN/ Static hosting infrastructure

A CDN will greatly increase the speed and performance of your website. There are numerous CDN available today, and most ship with automated deployment, CI/CD pipelines, cache invalidation features. Popular CDNs are Netlify, Firebase, Cloudflare, Fastly, Surge.

Popular CDN resources

  • CDN(Content Delivery Network).
  • 6 Modern Jamstack Hosting and Deployment Solutions.
  • What more can a CDN do on the JAMstack.

External APIs

A major advantage of the Jamstack is the ability to consume data from external sources with an API, this removes the need for building a backend of your own. This approach reduces complexity and helps to build sites faster.

External API resources

  • Programmable web API directory.
  • Is there a risk to relying on external APIs on the Jamstack.

The Jamstack Best Practices

  1. Store your entire code in GIT.
  2. Deploy your code in a CDN. This is not compulsory but you will save time and money compared to deploying on big cloud providers like AWS.
  3. Use modern build tools like Webpack, PostCSS, and Babel to ensure your site is compatible with all browsers. Most modern Static site generators ship with a build tool ie Hugo-extended and PostCSS.
  4. Use Automated building and Atomic deploys. You can easily do this with modern CDNs like Netlify.
  5. Ensure instant cache invalidation.

Links to popular Jamstack Communities

  • Jamstack Community on Gitter
  • Jamstack Reddit Community
  • Jamstack.org Slack Community
  • Strapi Slack Community

Popular Jamstack resources

  • Jamstack Fundamentals.
  • Jamstack: The Cornerstone of Modern-day Web Development.
  • The Jamstack in 2020.
  • The promise of the Jamstack.
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

You might also be interested in...

Strapi Starter Vue Blog
  • Guides & Tutorials

Strapi Starter Vue Blog

Bootstrap a simple blog application using Vue and Strapi, the most suitable headless CMS for Vue.js.

Maxime Castres

February 26, 2020

What is the Jamstack?
  • Web Development

What is the Jamstack?

Learn what the Jamstack is, the benefits, and the ecosystem that revolves around this new paradigm in web architecture in this guest post from Zara Cooper, software developer and technical writer.

Zara Cooper

Zara Cooper

November 19, 2020

Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 1/6
  • Guides & Tutorials

Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 1/6

Learn how to create a food ordering app with Gridsome, Snipcart and your favorite headless CMS: Strapi

Ekene Eze

Ekene Eze

December 7, 2020

Unleash content.

Starters
Get Started

Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

Product

  • Why Strapi?
  • Content Architecture
  • Features
  • Enterprise Edition
  • Partner Program
  • Roadmap
  • Support
  • Try live demo
  • Changelog

Resources

  • How to get started
  • Meet the community
  • Tutorials
  • API documentation
  • GitHub repository
  • Starters
  • Strapi vs Wordpress
  • The Guide to headless CMS

Integrations

  • All integrations
  • React CMS
  • Next.js CMS
  • Gatsby CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Gridsome CMS
  • Flutter CMS
  • Hugo CMS
  • Typescript CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy