Why do you need to move to Headless CMS and JAMstack?

What is the Jamstack?

What does the word "JAM" mean? It is an abbreviation of the three main components of this technology.

JavaScript: This is a programming language that helps the user interact with DOM elements on web pages and load data into markup.

API: Application Programming Interface, in this case - a source of content necessary for embedding into a markup template.

The source can be content files obtained directly from the content generator; a CMS that we connect to the static site generator; a full-fledged REST API for displaying more structured and complex information. And also SaaS (software as a service - a service model that provides subscribers with ready-made application software that is fully serviced by a provider) or applications created by the project’s web developers.

Markup: Template markup is pre-built, usually using a site generator (SSG) or a build tool for web applications. Modern static site generators allow you to create hundreds of pages in seconds, implement SEO functions and connect if needed a CMS as a data source.

Common to all Jamstack sites is that they are independent of the web server.

Moving to the Jamstack involves using one of the headless CMS or your own backend that provides an API. Major site updates are done through Git, with the site completely rebuilt from scratch using modern build tools such as static site generators. Each new deployment can be launched via Git or via the CMS of a static site.

One of the main reasons for moving to the Jamstack is the need for a more user-friendly, fast and modern CMS to manage your site's content.

What are the disadvantages of traditional CMSs?

Using a monolithic CMS was the norm 5-10 years ago. Since then, the number of mobile device owners has grown, and the requirements for the functionality of sites have changed.

Traditional CMSs (such as WordPress and Drupal) have a number of disadvantages that make it more and more difficult to develop and maintain modern sites.

Complexity. Many traditional CMSs have overgrown over the past decade. In order to effectively manage content, a huge number of plugins have to be added to the vanilla version. New users find it difficult to work with such CMS - the excess of options reduces productivity.

High cost. Let’s not forget about the high cost of traditional CMS - many developers, trying to save money, create their own content management solutions. In the long term, this leads to additional maintenance costs.

Low security. The problem is so complex that some developers even decide to create their own hacks, making it harder for hackers to find vulnerabilities. But their CMSs are still often hacked despite their best efforts. Of course, vulnerabilities are eliminated from time to time by releasing updates for plugins and the CMS itself. But whether or not to apply these updates remains on the company's conscience.

Incompatibility with architecture. In some cases, the CMS does not fit into the site architecture so much that the developers have to create a "spacer" between the CMS and the application, or, again, write their own CMS.

Impact on the code. Finally, developers often complain that traditional CMSs influence their HTML code, for example, by embedding third-party scripts that can potentially alter the DOM tree or execute malicious code. You can even get into a situation where there are two versions of jQuery on the page. We have to look for workarounds to avoid such problems.

How does the Jamstack solve these problems?

No impact on the code. Headless CMS gives you complete freedom and does not affect the final HTML code in any way. To retrieve content from the repository, you just need to load the data using your favourite programming language by making requests to the RESTful API or GraphQL API at the build stage.

Since such products do not have a “head” (i.e. server), headless CMS leaves the design choice entirely to the developers.

Affordability. Today you can choose from the mass of free open source CMSs, or use the cloud-based headless-CMS, whose pricing policy is right for your project. Such a solution will cost less than developing and maintaining your own backend. Most popular headless CMS: Sanity, Storyblok, Strapi, Contentful, Ghost, DatoCMS, Prismic.

Ease of learning. Headless CMSs have a clear user interface optimized specifically for content management. At the same time, modern CMSs allow you to create your own interfaces. This is convenient if, for example, you need to integrate content editing capabilities into the application, and not redirect users to a different interface making life difficult for them. This can be done in Strapi, Ghost, Sanity CMS. It is also important that the headless architecture makes it easy to access content using APIs and write your applications the way you want.

High security. Cloud-based headless CMS are much more secure than traditional ones. First, you will always have the most recent version: the CMS is deployed directly at the vendor’s, which maintains both the code and the server infrastructure and can pay enough attention to security issues. Second, in order to crash the frontend, attackers will have to shut down the CDN, which is possible, but only in theory, if we are talking about serious CDN providers.

When to move to Jamstack?

The JAMstack can also be used to build more complex authenticated web applications, e-commerce sites, and more.

The most famous example of a successful transition to the Jamstack is Smashing Magazine, which has over 20,000 comments and thousands of articles.

As a result of the transition, the publisher has got a number of advantages:

Speed. Especially true for large sites. In particular, Smashing received a six-fold increase in operating speed. In addition, the CDN delivers content for each user from the nearest available server.

Uptime. The page is not re-compiled with every new request, it is pre-built which increases the uptime of the site. Then, a cloud-based CDN can handle much more traffic, which was important for the e-zine with its 4,000+ articles.

Security. So many times the sites on WP, Drupal, or any other CMS have crashed. In 2014, hackers found a vulnerability in Drupal. As a result of the attack, 12 million sites were affected. By moving to Jamstack and reliable CDN, Smashing Magazine was spared of the obvious security issues.

Invalidating the cache. When the resource is updated, we need to present the user with the new version of the page. This, perhaps, is one of the most confusing problems in programming. The JAMstack also allows you to solve this problem: for each user, its own version of a static page is created.

Git-centric workflow. You will no longer have problems with version synchronization - everything is in Git. You can clearly see in the hosting platform panel which version is deployed now. There will no longer be a situation in which two developers upload two different versions of the site to FTP, as a result of which the production crushes or other non-obvious bugs appear.

You are free to choose frameworks, site generators and other front-end tools. The Jamstack achieves this by decoupling the backend and frontend. This was important for Smashing as well, as their site is very large and requires the use of modern custom tools.

So when should you switch to the JAMstack?

For example, you have a content-based site with a large number of pages or a very significant number of visitors. Or pages with content that rarely changes (such as landing pages or authentication apps). You may be tired of security, performance, cache invalidation issues. Or you just don't like your CMS.

You don't even have to give up WordPress. You can decouple the front and back end, the back end will work on the headless version of WP (yes, it exists!). Another option is to transfer only landing pages to Jamstack, then they will work as fast as possible. The same goes for Drupal and other widely used CMSs - some of them also have headless versions.

If any of the above is your case, and you run a web development agency, then Jamstack is definitely worth a try. Your developers, tired of writing PHP code in templates and maintaining such code for the front-end, will say “thank you”. At the same time, the websites you build will start working blazingly fast.

And the last thing. Recently, Google has changed the core metrics that heavily affect a site's ranking. Since 2020, there are so-called Google Web Vitals, the main ones being Loading, Interactivity, Visual Stability.

But we will look at this topic in another article.