Replacing classical backend systems with a headless CMS (Strapi, that is)

At HipSquare, we've recently been working a lot with headless content management systems (CMS). After a large Contentful project using Gatsby as a static site generator, we're currently working on another large project using Strapi as a headless CMS and Next.js to generate a mostly statically pre-generated website with some additional dynamic pieces and API routes.

In parallel, we're working on a few other projects, mostly building web and mobile applications. In terms of technical requirements, they're usually quite similar:

• There is a frontend that is accessed in a web browser or as a mobile app. We like to use Angular and React for frontends and, in many cases, Capacitor to reuse web applications in mobile app containers.
• There is a backend whose main responsibility is to provide API routes for the frontend to store and retrieve data and implement some small use cases that are not easily built in the frontend. We're generally using a HipSquare NestJS starter to get a jump start, but have also worked with Backend as a Service (BaaS) providers such as Google's Firebase or simple Express-based backends.

The user-facing competitive edge lies in the frontend

While working on the backend portion of our apps, we've come to realize that a lot of the backend work is somewhat repetitive, while not providing a major competitive edge to the apps themselves. What users interact with is the frontend, which therefore should be optimized for usability, speed, and branding.

Of course, our app frontends need a backend to accompany and enable them. The backend needs to be stable and secure, provide low latencies and be open for future enhancements. However, the specificity of our backends tends to be very low: They usually provide authentication and authorization and a number of CRUD-style API routes to interact with an underlying data model.

These types of backends are a commodity. They need to perform well to enable user-facing features, but you won't gain a competitive edge with them.

Taking Strapi a step further

Realizing that most of our backend developments are mere enablers for a great frontend user experience, we started thinking about backend solutions that would allow us to scale backend development easily, quickly bringing new projects up to speed, permitting us to rapidly bootstrap a backend system with its basic functionality, a custom data model and API routes based on that data model that supports role based authorization based on that data model.

Looping back to our headless CMS projects, we were wondering: Is there more we can achieve with the technology? So far, we've used headless content management systems and Gatsby and Next.js for classical website delivery, and it's worked great. What we'd like to do in the next few posts on this blog is to take you along a small journey to use Strapi as a configurable backend system for a small web application.

What we want to find out

The questions we'd like to answer for ourselves:

• Can we use a headless CMS, in this case Strapi, as a replacement for a more classical backend development?
• How much can we reduce the time to setup our backend and can we achieve that without any coding but just configuration?
• What are obstacles along the way and what lessons can we learn before trying this approach with a larger client project?

How we'll approach it

What we'll attempt to build throughout the next weeks will be a classical to do application. We will

1. set up Strapi, configure a data model to support our use case and check out how we can get data out of and into the system,
2. build a small Next.js app that will use Strapi as a backend and allow a user to manage their to dos,
3. try to answer the questions from above based on our learnings.