Decoupled websites are secure, fast and cost-effective – perfect for councils

In this article we break down the nuances of decoupling, set out the pros and cons, and tell you why Annertech should be your first port of call.

What are decoupled websites

Decoupled, or headless, websites are websites that have a separation between where their content is stored (the CMS/database) and where it is viewed.

To explain this, let’s use the example of a standard website that is built on a platform like Wordpress or Drupal. Very simply, these CMSs have a database into which content is entered, and a template system that shows this content to website visitors.

When it comes to decoupled websites the content is stored in a CMS but a different service is used to display the content.

Craughwell Furniture’s digital home – cfurniture.ie – is an interesting example of a decoupled website we launched recently. The shop is powered by Shopify, the popular e-commerce platform, and the content is stored in NetlifyCMS, a lightweight CMS powered by Netlify.

Using a decoupled approach allowed us to choose the best tools for this particular project, and bring two various content sources together to make one holistic website.

The best of both worlds

When it comes to decoupling Drupal, one of Drupal's strengths, no matter where you are in terms of enterprise levels, is that it’s great for content storage and data modelling: defining different content types (like galleries, news portals and job listings) and the ability to interlink different types of content with each other.

You can see a good example of this with our blog – which displays Drupal’s brilliance with the organisation of content and the relation between that and other pieces of content (tags in a blog, products in a store, related content).

However, a good website doesn’t only look good. It also feels good to use. Visitors to a website need to be immersed in a digital experience that is seamless. Many of these platforms might be extremely competent at the backend but they might not be as efficient at the frontend, that is, displaying the content.

How websites work is that, when visitors get to a page, the website has to go to the database and get various pieces of information from different parts of the database that make up the requested page they are visiting. It then gets all the files that make up the actual page itself (HTML, CSS, JavaScript, etc) before putting everything together and rendering the webpage for them. That can take time.

For a decoupled website we can choose the best tools for each specific part of the request pipeline. We use the world’s best technology for the presentation layer (frontend) of the website  – in our case, that's usually Gatsby – and combine this with the best technology for the data storage on the backend – in our case, that's usually Drupal.

The result is a stunning, high-performance site that ensures a great digital experience for users.

Advantages of decoupled websites

1. They’re secure

When we create a decoupled website the storage of the data and the servers are in one place and the actual website is somewhere else. For example, my personal website is hosted on Github Pages but the CMS is behind a firewall, somewhere where nobody else can get to it. There’s no database, no server, and no forms that might make it hackable. And that right there is a very enticing proposition for local councils: to have a very secure website.

Another benefit of this can be seen when it comes to updates. For example, when there is a security update for Drupal there is a rush to get applied (because it is open source anyone can see the source code at all times).

When it comes to a decoupled site, since the Drupal backend is stored off-site and locked away and not available on the open internet you can take your time about doing your updates. The updates definitely need to be applied, but the urgency is removed.

2. They’re fast

Aside from the security, there’s the idea of speed. Performance is one of Google’s metrics for search engine ranking, and one of Google's core web vitals metrics is the user's experience when loading a webpage.

These metrics include how quickly a page loads, how quickly a browser can respond to a user's input, and how unstable the content is as it loads in the browser. As an SEO metric, having a fast website is as important as having good content.

Decoupled sites are fast because they do not interact with the database and do not gather all the parts of a page before putting the page together for you. Rather, they deliver the whole page, fully-formed, in one go.

3. Scalable solution for microsites and campaign sites

Decoupled sites are a good choice for local governments because many councils have a large number of websites. For example, in addition to a main council website there might be numerous small microsites for events such as a Christmas campaign, a local food fair or a St Patrick's Day festival.

Each microsite has its own hosting platform, database and developers who maintain it. The costs start to snowball when it comes to this many sites. If there’s a security update for a CMS then multiple different websites need to be updated and tested – and when it comes to a council website there could be 30 or 40 different websites that need to be updated.

Within a decoupled situation, we'd suggest just one CMS – so when there's an update, only one platform needs to be updated; when there's a new feature request, it needs to be applied to only one site.

This simplifies things beautifully. Decoupling would mean that all the council’s content could be stored in one place, so content editors just need to get used to use one system. They could, for example, create the news for all the different websites on one website and then tag that news as, say "Christmas" or "food festival". After that, the decoupling system will pull those content items into the individual websites.

The situation can be tailored to specific needs. The main council website could be decoupled – lighting fast, un-hackable and future-proofed. And then additional microsites could be added as they’re needed.

Microsites can retain the branding of the main site or they can have a completely independent look and feel. But the idea is that all content is stored and managed in one place.

It should homogenise your content and make it much easier to keep track of it. So as we've said, it means content designers and editors only need to learn one system, and if they want to update any system – a website, an app, a microsite, etc – they just have to log in to the one shared CMS.

4. Costs and time

Many councils prefer to pay for one website rather than for 50 websites. A decoupled site allows for this.

For example, when working with the Irish Centre for High-End Computing we created a system in which all microsites are created in the current Drupal CMS, but not displayed there. To create a microsite, it's a matter of simply tagging each post or page with the name of that microsite. There can be as many microsites as needed, either following a set design or with a custom design.

If ICHEC wants a new microsite for, say, Science Week 2022 and Science Week 2023 and so on, this can happen with very little development time. We’ve built a system where the content creators can create all the news posts and the home page by adding a category on the website called Science Week 2022 and tagging each page they want to appear in the microsite with this.

It will take us an hour or two to get the infrastructure set up for each website with the website live straightaway, rather than taking us a number of weeks to build a new website.

5. Redesigns and migrations

Redesigns and migrations are a double-edged sword. You have to do them, and things usually look and run better once they’re done. But they take time and cost money.

When it comes to a decoupled site, because the backend and frontend are decoupled from each other either of them can be updated at leisure without affecting the other part.

So let’s say someone wants move their website from Wordpress to Drupal. They can afford a new look for the website but can’t afford to update the whole database and migrate all the content to a new system.

We can redo the decoupled frontend – and it would look brilliant – and then in a year’s time when they have the budget to update the backend we can get on the backend and the frontend remains the same. There can be different stages of development, so they can move at the pace they want.

Please see the video below that I presented at DrupalCon Amsterdam on GatsbyJS and decoupled websites.

Websites are coming full circle

Decoupling is actually going back to the way websites used to be built. It’s part of the JAMstack movement – JavaScript, APIs and Markup. The first websites were built on the idea that HTML code is written into a file, which is uploaded to the internet. And that was it. And because these were "static" assets, they could be easily cached.

It was only later that databases were developed to be able to make CMSs like Drupal. What we do in our decoupled sites – using Gatsby – is create static sites. So all the site assets – the HTML files and the images etc – are uploaded to the internet. Basically, we're going back to the future!

In conclusion: Decoupling and LocalGov Drupal

Annertech’s team members are not only known as the “go-to” Drupal experts, we are also a major contributor to LocalGov Drupal, an open source collaboration between UK councils and Drupal developers.

We are currently in the process of creating a LocalGov Drupal decoupled Gatsby boilerplate. As already mentioned, councils now not only reap the benefits of a decoupled main website but also can add microsites on an as needs basis – all content being stored centrally but potentially presented differently.

We are fortunate enough to have been involved with LocalGov Drupal from the beginning. We have years of experience with council websites, and we’ve worked on decoupling sites for a long time.

If you’re looking to decouple your Drupal site, making it faster, more secure and cost effective, you’re in the right place.