Headless TYPO3 : What It Is and How to Use It?

TYPO3 Headless is one such approach that is gaining much popularity because of its innovative ability to deliver outstanding digital experiences. 

Do you know?
According to Contentstack Headless CMS adoption rate is expected to double in the next year.

With interactive and unique front-end designs and fast-loading websites. With the commitment of TYPO3 and its API-first architecture, content can be used and displayed anywhere.

Read on to learn more about TYPO3 Headless CMS. Trust me it’s interesting! Grab a cup of coffee and read on!

When you load a page on a TYPO3 site, the server runs code that builds front-end developed code. That document is then sent to your browser. And then so TYPO3 and web apps that work in the same way are called server-side apps.

Basically, a headless approach is becoming very valuable in our multi-device world. Headless content management means the CMS is responsible solely for content input, editing, and sorting on the back end. A headless system should be highly accessible, and however, it is irrespective of front-end visual impact.

So, how does content in a headless system make it out into the world?
Well, the content in the database is accessed through RESTful API calls. This means it can be viewed wherever it is called to, without templates or plugins. This can be used to create a traditional browser-based website or almost anything else in the IoT. 

Explaining in detail, we can say that TYPO3 serves as the backend system. The frontend, which the client sees, is separate from TYPO3. That is where the headless name comes from - TYPO3 does not have the top layer anymore that is the head ;) but only exposes the APIs which the frontend uses as content sources. 

TYPO3 can serve as the best fit for Headless CMS. You must be wondering why so?

The reason for this is because TYPO3 has out-of-box functionalities that have most of the required website necessities. It is one of the most mature CMSs and is compatible to work well with other fantastic APIs to build a perfect TYPO3 Headless website.

TYPO3 community is working very heavily to allow TYPO3 to be a great API-driven CMS. In 2019 a “TYPO3 Headless initiative” was launched. Its aim was to coordinate the development effort to allow TYPO3 to be a fully headless CMS.

The ultimate goal of TYPO3 Headless, To prepare a number of APIs to pass from TYPO3 to your favorite JavaScript frameworks like ReactJs, VueJs, AngularJs, etc.

As of writing this, enormous progress has been made in allowing TYPO3 to serve and receive content via APIs. 

That’s all we know about TYPO3 Headless CMS. Let’s check it’s how it works in TYPO3.

TYPO3 has been ahead of time and many thanks to Macopedia for sponsoring and working for the TYPO3 Headless initiative.
Basically, to use the Headless concept for the TYPO3 website, it is possible through TYPO3 Extension "headless" an extension with JSON content API for the TYPO3 PWA solution.

In headless extension, we implemented a new JSON Content Object, which allows you to specify what fields you want to output, and how they will look. First of all, let's take a look at a simple example

lib.page = JSON
lib.page {
  fields {
    header = TEXT
    header {
      field = header
    }
  }
}

Output

{
    "header" : "headerFieldValue"
}

in addition, keyword fields allow you to nest multiple times fields in json, e.g.

lib.page = JSON
lib.page {
  fields {
    data {
      fields {
        foo = TEXT
        foo {
          field = bar
        }
        foo1 = TEXT
        foo1 {
          field = bar1
        }
      }
    }

  }
}

Output

{
    "data": [
        {
            "foo": "bar",
            "foo1": "bar1"
        }
    ]
}

The current Ext:headless extension is powered with JSON:API module. It has massively improved the REST experience with TYPO3, making it an incredibly versatile system far superior to practically any CMS on the market.

• JSON:API module exposes all entities in TYPO3 allowing for easy interactions, but it does so in a very elegant fashion:
• It is compliant with the JSON:API standard (https://jsonapi.org/) making it easy for anyone wanting to integrate with a TYPO3 website easy to understand the data structures without the need for a lot of custom documentation
• It allows querying for lists and filter by entity properties  and fields also following the JSON: API standard
• The core JSON: API functionality is further extended by the JSON: API Extras module, which allows for additional configurability of the endpoints.

The above features effectively turn TYPO3 into a super robust backend for frontend applications.

Headless TYPO3 is an interesting approach to build feature-rich interactive websites or build content hubs that power various content-consuming websites and media. It is however not without disadvantages and careful consideration should be made before choosing this path.

Hopefully, this article gave you sufficient information to choose from. If not, we are always happy to consult your TYPO3 Headless project.