Have you ever had a hard time managing your website content? Well, you’re not alone! When it comes to the question of content management, a CMS (Content Management System) seems like a fitting answer, promising to help businesses solve content problems. However, applying some random CMS without a solid plan often results in a content management system that will solve one set of problems only to create more. Taking that into consideration and making some comparisons, we came to the decision to use Contentful, a cloud-based headless CMS created in Germany in 2013, to help solve our content obstacles. With that said, we would like to share our Contentful journey! You’re welcome to come along for the ride!
We had problems, and Contentful fixed them
Originally, our website was built using WordPress, a popular content management system. With this comes the flexibility for content creators to create material based on their own needs. However, as the site expands and more specific requirements are required, WordPress becomes a hassle to use for all parties involved in terms of timing and cost:
- We need lots of plugins for additional features and have to monitor constantly because WP update theme and plugins frequently
- WP is not an optimized platform for page speed due to all the added plugins, oversaturated databases, and codebases
- Poor SEO ranking because WP only offers limited SEO optimizing features
As such, we moved on to Contentful in the hopes of engaging in something of greater value, which we obviously did.
Below is a list of what Contentful brings to the table:
- Flexibility and Efficiency: Content creators are now focused on creating content with a super easy-to-use interface. And for the agile process, the collaboration and working capacity are better and more in sync.
- Scalability for Content: With Contentful, the number of web pages and new forms of content are easily created, for both mobile and desktop.
- Scalability for Languages: Contentful offers language translations as well as the ability to meet the challenges of geographic expansion.
- Reliability: Contentful uses HTTPS everywhere for secure transmission and offers a high-performance global CDN that can be accessed instantly from anywhere.
Our first attempt applying Contentful
For our projects integrated with Contentful, they are all built on top of NextJS, which gives us the power to quickly create scalable, dynamic, static websites with improved search engine optimization (SEO) and enhanced performance.
Our journey first kicked off with the revamp of Public Page on February 9, 2022. Initially, the project was at ease using Contentful in spite of some obstacles here and there. For our second project, we breathed life into the Parcel Monitor Community site with Contentful’s help. This site was deployed and introduced to the community on July 1, 2022.
How content is fetched from Contentful
Contentful’s models are built on the GraphQL schema, as such, we use the GraphQL Content API to request both published and draft content. But for security reasons, each API call must include the Space ID and Content Management Token in the Request Header (different for each environment). Hence, we store all the key variables in our environment files (.env) and use the API to get a JSON response from Contentful. In addition to that, when we received the response, we had to remove the null items (Draft content) from the array in the returned result to ensure these items would not disrupt the page UI.
Everything up to this point has been good; however, we are using the Team tier of Contentful, which enables just 2,000,000 API requests per month. And if somehow we exhaust this quota, the service will charge an extra fee for each API request.
Redis with Contentful’s Webhooks
Due to the API restriction, we are now faced with the burden of ensuring that the product is always operational and hopefully not making additional monthly payments. So to reduce the repeated calls for repeated content, we devised a method to overcome this difficulty by combining Redis with Contentful’s Webhooks.
Redis is an open-source, key-value data structure store, and we use it as a caching mechanism for our projects. Contentful’s Webhooks, are HTTP callbacks that will trigger automated workflows when data in Contentful has been edited. With our projects, we apply webhooks for these changes: archive, publish, unpublish, and delete content.
As such, the specific flow of how our application now runs is as in the diagram below, where changes made on Contentful will trigger the Webhook to update the data on Redis.
For the inner workings of Redis in our application, we designed our own Redis query mechanism. This is because Redis can only obtain the cache using basic search commands, not complicated ones like those used in GraphQL queries. As we implemented, Redis was used to synchronize all records on Contentful that were grouped by content types. In essence, we are caching the data by Content Type. Under the hood, all requests were for Redis, and we only got data from Contentful when Redis failed. They did an excellent job on the first project, Public Page.
However, owing to the large quantity of data provided by the second project - Parcel Monitor Community, we had many poor queries(having to run through every item in the array to get the exact component), which caused the application to run slowly, so we had to find other optimal solutions to improve. One of them is using an alternative approach to replace manual data synchronization and the related Webhook. That is, caching the page into Redis with the page’s slug serving as the key. Webhook now takes care of clearing the page’s cache containing the record that the editor changed or for the page that is the record itself.
The outcome
What have we accomplished since the Contentful integration, then? Find out now:
- Produced a wide variety of very dynamic content types and components so that the marketing team can populate their content without the assistance of us developers.
- Implemented Webhook because a cache is required, and it is very helpful. Webhook from Contentful make life simpler; without webhook, developers would have to perform manual tasks.
- Utilized UI Extension as Contentful doesn’t support anything that isn’t a fundamental editor-side element. This allows us to create any custom element we desire, and we have already created 4 of them to improve the editor’s user experience when populating the contents.
- Using Contentful’s Preview Mode, which makes it easier for editors to check their content. They can use that to view any draft entry they like, edit it if necessary, and then publish it.
- Write a migration script to be used when we want to change the content-type structure. It makes things more consistent and, of course, faster and more secure.
Are there any regrets?
Although the project has been running smoothly until now, there are still some “regrets”, some ideas, and features that we could have done but didn’t because of the limited time back then.
Contentful offers some extensions and features that leverage user experience for editors and QA. This has been requested multiple times by the QA but was rejected by the engineers due to the time limit. The extensions here can be the errors, the hints, the validations, the helpers, which will help enhance the editor’s usage of Contentful as well as reduce the possible errors caused by the misunderstanding of some parts from the editors.
For the record, our interfaces and securities for content and assets are different from the expectations of Contentful (not that much though). Contentful actually provides a command line for generating all the Content Types’ interfaces, but we have not yet utilized it. As such, our models for the Content types in the code structure are somewhat different and take a bit of our time to modify to fit our use cases. This is the same for our securities, which are all done manually in our code instead of applying for Contentful extensions. It would be more optimized to achieve all of that but we’ve got to move on to the upcoming epic, so they will be delayed for quite a while.
The conclusion
Throughout the journey, it is undeniable that Contentful lends itself to a very wide range of applications. It’s the CMS that lets you build a user-friendly, high-quality experience while being easy for a non-technical editor to use. Because Contentful is platform-agnostic and omnichannel, it has the tools needed to satisfy every content-management need. Based on our experience with Contentful, we can say it’s one of the best and most efficient ways to ensure that your content hits the target.
