The headless stack

At YPA we have transitioned from a traditional CMS system to headless, which has shown promising results. It’s faster, we have more development flexibility and the pages rank higher in Google. In this blog I will describe why we decided to switch to headless and what we learned along the way.

7 min leestijd

A platform for your e-commerce business

There is a lot to consider when creating a new e-commerce business. What starts off as a simple store with a small catalog of products could soon transform into a huge catalog, subscriptions and special customer loyalty programs. There is often a trade-off to be made between the short-term and long-term costs and the flexibility of the platform to get exactly the right experience for your customers. The possibilities of your technical platform are defined by the technical ‘stack’, a collection of tools and frameworks that form the technical basis of your e-commerce business.

What is a stack actually?

The ‘stack’ is the collection of technical tools to create your website and keep it running. There are hundreds of different stacks that could lead to almost the same e-commerce website. Some stacks are ‘batteries included’. They form an e-commerce website on their own, like Magento or WordPress / Woocommerce. Others are offered as a service rather than a software package, such as Demandware and Shopify.

Each stack has its advantages and disadvantages. The biggest difference is between frameworks and content management systems. Content management systems such as WordPress/Woocommerce and Magento have great benefits: after installation the whole website runs, products can easily be added and templates can be bought. There are lots of plugins to install. Unfortunately, this ‘batteries included’ approach comes at a price: everything is done in the way of the CMS, if you want to do it another way you’re out of luck. This means it’s very hard to create your own customer portals in WooCommerce or WordPress, with very specific business cases where the UI fits exactly the use case you need. 

CMS’s are great for simple webshops or Blog’s. If you have exactly the use case of the platform. Unfortunately, many of these platforms have a lot of legacy and are increasingly outperformed by modern front-end frameworks. Investing heavily in such a platform means you would have to replace your whole website once a new version of the CMS is released, like what happened after the transition from Magento 1 to Magento 2.

Frameworks on the other hand are created for programmers. They offer the tools to create any webpage, UI element and quickly develop the web application. The main drawback of frameworks is: The lack of batteries included. 

YPA Headless: Best of both worlds

At YPA we didn’t want to lose all the batteries included in WordPress and Woocommerce. So we use WordPress as CMS, Laravel as the ‘brain’ API and the business logic, and Next.js for the front-end.

Reasons to use WordPress

The main reason to use WordPress is because it’s a proven system to manage your content in (Content Management System). It’s the no. 1 most used CMS in the world. There are a lot of plugins that provide the functionality we need for a webshop, mostly the Woocommerce plugin. Because of ACF fields we can quickly add new content fields without having to develop any code.

Reasons to use Laravel

We use Laravel as a middleware because it’s easier to develop new business logic in Laravel than in WordPress. Laravel is a framework, a set of tools to let developers quickly develop new functionality. We use Laravel because it uses the same programming language as WordPress (PHP). Laravel is the PHP framework with the largest market share, with a reason: It’s very popular with developers because of its simplicity, documentation and it makes it easy to get the job done.

Reasons to use Next.js

Next.js is a React framework, it’s used to make the website layout and user interface. It is built upon ‘React’ which is a part of Meta (Facebook), which is a JavaScript library. The main reason we use Next.js is that it’s a modern framework that has a lot of improvements to easily increase the site speed. Also, there’s a lot of support and there are a lot of libraries available for React and Next.js to improve development speed.

Advantages of the stack

All components communicate with each other via API’s (application programming interface, the languages programs use to communicate). This has the following advantages:

  • Separation of concerns: WordPress handles the content, Laravel the business logic, Next.js the front-end.
  • Flexibility to build any business flow you can think of. Need a new page, new URL structure, a new user portal or complete new app? We can build it.
  •  Very fast development of new CMS pages using WordPress ACF fields plugin. If you need new content on a certain page we can quickly add it on WordPress without any coding. 
  • Fast development because of our experts. Everybody has a specialization, the front-end team touches the front-end, the back-end team the back-end.. This separation improves development velocity and makes software easy to maintain and test.
  • Cloud-ready infrastructure. WordPress, Laravel and Next.js each have a separate container which can be deployed on traditional hosting but it’s also possible to host on cloud services such as Amazon ECS. It’s very easy to scale when your business starts to grow.

Why use a headless stack?

Do you need a headless stack or would a Shopify / Woocommerce shop be a better fit for you? A Shopify shop is probably the best fit for you if:

  • You want a quick and cheap web shop without any custom functionality.
  • You want to save initial costs.

It is probably not the best choice if you:

  • Want a very fast website.
  • Have a lot of orders and want to save the Shopify fees per order (advantages of scale).
  • You want to build custom functionality into your website.

A headless stack is probably the right fit for you if:

  • You want a website that uses the best front-end tools and is optimized for Google Core Web Vitals
  • You want to build your website statically to reach a very high score in Google Pagespeed Insights.
  • You want to be able to add custom functionality to your website in a later stage.
  • You want to separate the ‘head’ of your application from the ‘front-end’ so you might replace either one in the future without having to build a completely new website.

It probably is not the best fit if:

  • You don’t have the funds to invest in a headless minimal viable product (MVP).
  • You only need a simple webshop without any custom functionality.

We are very happy with our transition to the YPA headless stack. We can develop more efficiently and Google also indicates our websites have good Core Web Vitals. We believe this is the future for YPA and the best way to create a better user experience for the users and increase organic traffic.