What is Hygraph?

Hygraph is a headless content management system (CMS) that delivers content as data via API to any platform instead of being tightly coupled to a specific website, web app, or mobile app.

Content management system (CMS)

In the past, when individuals who were not familiar with programming languages wanted to build websites, blogs, and more, they depended on a traditional CMS, which has been around since the early days of web development. Some famous examples are WordPress, Wix, Drupal, and Joomla.

These tools help us build a website without needing to write all the code from scratch or needing to know how to code. A CMS allows everyone to build websites easily as long as they can read and operate a computer. These traditional CMS handles the front-end and back-end aspects of every website and allows minimal flexibility.

As developers, we sometimes find ourselves at the mercy of these platforms. In traditional CMS, our frontend, backend, and database all live together as one tangled-up unit on our server (putting everything in one big bucket, such as our content, images, HTML, and CSS).

This later led to the introduction of the headless CMS.

What is a headless CMS?

When we talk about a headless CMS, we refer to the head as the frontend, which determines the appearance of the website. The body is the backend, where the content repository handles most hidden logic. A headless CMS is a back-end-only content management system (CMS) that allows you, as a developer, to develop the front-end website using any technology or framework.

In other words, a headless CMS gives us the privilege of taking charge of our website by handling the backend while we handle the frontend. This gives us the advantage of customizing it to our taste, such as with Vue.js, React, Angular, or even JamStack's static site generators (Nuxt.js, Gatsby, Next.js, Gridsome, and so on). When we compare this to the traditional CMS, the significant difference is that our frontend and backend are no longer bound up together and would now use an API (Application Programming Interface) to interact.

Traditional CMS vs. headless CMS

So, to summarize, the traditional CMS is a single solution that manages the content (architecture, logic, and many more) and the frontend. A headless CMS has zero impact on the frontend and focuses only on the content (structuring this content and allowing us to create and edit this content). Finally, the headless CMS allows us to access this content via an API.

Let's learn some benefits of a headless CMS over a traditional CMS:

Omnichannel freedom

A headless CMS provides us with omnichannel freedom, meaning we have the freedom to decide where and how our content is delivered. In contrast, with a traditional CMS, we do not have omnichannel freedom as we are constrained to delivering our content to the channels that the CMS supports.

Fast editing

With a traditional CMS, we might get distracted trying to see how our site appears on the frontend because the frontend and backend are coupled. However, with a headless CMS, content editors can work without distractions because these platforms provide a user interface that makes uploading, editing, searching, structuring, and managing content accessible.

Automatic updates

When building websites with a traditional CMS, we end up making use of plugins, themes, and lots more. Before making any updates to a traditional CMS, we’ll want to ensure that the software, plugins, and theme are compatible and won't break our website or cause a loss of information. To avoid this, we run a backup before attempting updates.

The headless CMS we will use doesn’t have this problem because we don't have to worry about keeping the plugins, themes, or system software updated. This is because the particular headless CMS we are using keeps its systems updated, enabling us to focus and work without distractions.

Security

The next primary concern is keeping our web page safe from all forms of DDoS and other security attacks.

With a traditional CMS, this is an issue because of frequent upgrades and the fact that it is database driven. We want to ensure our data is safe and be mindful of the plugins or software we install. Web pages built with a traditional CMS can get hacked through insecure plugins or irregular updates.

With a headless CMS, the chance of encountering a security attack is slim, as the only form of interaction between the frontend and CMS is via APIs.

Performance

One major reason why a headless CMS may be chosen over a traditional CMS is that the frontend is decoupled, meaning we can use any frontend technology of our choice and then consume our data via API.

This allows us to opt in for performant page rendering methods like Server-Side Rendering (SSR) and Static Site Generation (SSG). In general, using a headless CMS lets us leverage the latest tools, libraries, and frameworks in web technologies and use them to boost the speed of our website.

A slow website is bad in all aspects and most importantly in business, as it leads to poor customer experience, poor SEO ranking, fewer sales, low traffic, and so on. A traditional CMS is loaded with plugins that impact how quickly and efficiently websites load. Plugins add code that runs every time a visitor views a page, so the more plugins we add, the less responsive our website is.

We have many types of content management systems to choose from, but we’ll use Hygraph.

Introduction to Hygraph

Hygraph is a unique content management system that allows us to fetch content (data) from a content repository via an API. Building this content repository is similar to how we build full websites with a traditional CMS by clicking buttons and filling forms.

First, we create an account, create a schema, and upload all our data. Then, we pull all this data onto our frontend (head) via the API that Hygraph provides to us. The unique feature peculiar to Hygraph is that we can interact with and fetch this data from the API via GraphQL with a nice playground built into Hygraph.

Why use Hygraph?

• Hygraph is the first GraphQL native headless CMS aimed at removing traditional content management pain points.

• Hygraph’s generated APIs offer endless flexibility for fetching or writing content with precise content selection, filtering, ordering, pagination, union types, mutations, and so on.

• Hygraph has a beautiful UI, so we don't have to struggle to create our admin panel. This makes it much easier to enter all the information into a web admin UI and enables us to build our frontend and consume the API immediately.