Blogs
J. Todd Bennett
Vice President of Marketing

dotCMS: The Headless CMS for JAMstack

Jan 05, 2021
By: J. Todd Bennett

Using Git workflows and modern tools, as well as pre-rendered content served to a CDN through APIs, websites built on JAMstack have almost infinite potential for scalability and outstanding performance. 

Also, the fact that there’s no one way to build JAMstack-based digital experiences, developers can use their favorite tools to work their magic. These are just some of the reasons why JAMstack is loved by experienced and novice JavaScript developers alike.

A JAMstack backend is usually a content API that returns JSON and can be hosted in a data store or a headless CMS, which means you can call on APIs to connect your site with other applications.

This article will show you why dotCMS is the best bet for building JAMstack apps and will include a tutorial on how to develop and deploy a JAMstack site using Vercel.

What is JAMstack?

JAMstack is an ecosystem of tools and architectures that streamline web and app development. Compared with traditional tech stacks like LAMP or MEAN, JAMstack delivers better performance, higher security, lower costs, and an overall better developer experience.

JAMstack is based on three things: a JavaScript library or framework, APIs to connect the dots, and markup text that can be interpreted by any CMS. When following the JAMstack approach, developers gain a modern set of web-based technologies that give them all they need to develop static sites with a dynamic feel. 

JAMstack represents a shift from backend-heavy operations to decoupled, nimble, frontend-based development. In a JAMstack development environment, the server and the frontend aren’t tightly coupled, which means less rendering time and faster content delivery. 

Read More: What is JAMstack?

Why Choose a Headless CMS for JAMstack?

Headless CMSs like dotCMS make it simple to manage, build, and deploy JAMstack-created content to websites, apps, and platforms. dotCMS is an API-first CMS that enables developers and marketers to create digital content once and deliver it anywhere. 

From content and layouts to navigation and workflows, dotCMS’ APIs give you the tools to access content and functionalities separately from the backend. With a headless CMS, you gain an interface where you can build rich content and deliver as JSON markup text for maximum compatibility with any device. 

A CMS for JAMstack like dotCMS provides users with coded JAMstack examples and starters to simplify and kickstart development. dotCMS also has plenty of resources and guides that offer in-depth tutorials to help you get the most out of dotCMS and JAMstack.

Read More: Headless CMS - API First CMS Features

What Can You Build With JAMstack?

Armed with the help of a headless CMS that doesn’t restrict the channels you can publish to or the frontend frameworks your developers can build with, JAMstack can help you create amazing digital experiences. Here are some of the ones you can build: 

Static Websites 

Static websites are usually made of pre-rendered HTML, CSS, and JavaScript, making them less demanding for web browsers and consequently faster and better performing. Static sites also leverage CDNs to achieve such speeds, caching content globally at the network edge, reducing load times and bandwidth issues.

Static site generators (SSGs) like Gatsby work in sync with headless CMSs to pull data via APIs and generate static websites that are easy to build and maintain. A headless CMS for JAMstack also covers the limitations of static site generators, giving them content editing and collaboration capabilities. Also, SSGs can connect to dotCMS via APIS and keep the website up to date with minimum effort. 

Read More: Building a website with Gatsby and dotCMS: How to use a static-site generator

Progressive Web Applications

Since progressive web applications are based on HTML, developers can deploy them to different operative systems and devices. PWAs provide mobile-app experiences for users, giving them a much more engaging, UI richer experience that loads faster and responds quickly to users. 

Rather than traditionally developing apps with different tech stacks for other OSs, using a CMS for JAMstack gives developers the flexibility to integrate third-party services and applications and manage everything in the cloud. Also, a hybrid headless CMS makes it possible for developers to use multiple endpoints and deliver to different devices as well as minimize hosting costs.

Read More: Building Single Page Apps With dotCMS

Serverless Applications

The serverless architecture enables you to write code, configure it and upload the package to a cloud server like AWS Lambda or Azure. Apps can benefit from the serverless approach because developers can leverage these third-party applications to manage servers.

With AWS Lambda, for instance, you write and host individual functions. As those functions run on-demand, you don’t have to manage servers yourself, and you’re only charged by the time your processes run, which means you can cut costs and scale along with your needs. 

Building and Deploying a JAMstack Site With dotCMS

Following the JAMstack approach can give developers a powerful tool to create fast, framework and server-agnostic digital experiences. JAMstack is more than a trend to develop fast client-side applications and websites. It represents a shift from the backend to a more powerful frontend created to simplify the developers’ work and ease their workflow.

JAMstack leverages the concept of serverless architecture and uses its simplified infrastructure to help developers focus on what they do best. 

Using a headless CMS for JAMstack like dotCMS offers developers tools to build outstanding UIs that give users the best possible experience. Also, the JAMstack ecosystem is growing every day, and there are plenty of ways of creating digital experiences following the JAMstack approach. 

We’ve created a two-part tutorial to help users build, edit, and deploy JAMstack sites and apps. 

In these tutorials, Freddy Montes and Ivor Padilla, two of our senior frontend developers, show you how to build and deploy a JAMstack application using Next.js and GraphQL and then how to make your JAMstack application editable in real-time with dotCMS.

Filed Under:

Recommended Reading

14 Benefits of Cloud Computing and Terminology Glossary to Get You Started

What is cloud computing, and what benefits does the cloud bring to brands who are entering into the IoT era?

Headless CMS vs Hybrid CMS: How dotCMS Goes Beyond Headless

What’s the difference between a headless CMS and a hybrid CMS, and which one is best suited for an enterprise?

Exploring TimeMachine: How dotCMS Handles Content Versioning

With dotCMS, tools like TimeMachine and Workflow Management help enterprises control content versioning, content edits, user permissions, workflows and more.