Building CNBC Africa Website with Next.JS: Headless WordPress Case Study
As the web development landscape continues to evolve, the decoupling of front-end and back-end systems has gained significant traction. This trend has also made its way into the WordPress ecosystem, where WordPress powers 43.2% of all websites on the internet as of 2023. While Frontity was once the go-to solution for creating “headless” WordPress websites with React, its development has become inactive. Thus, we set out to find a new and improved headless system for WordPress, ultimately deciding on Next.JS. Despite requiring custom development, we firmly believe that the end results are always breathtaking.
Client Requirement
Our client sought to migrate CNBC Africa from Frontity to Next.JS. This project served as a repeat engagement following our successful migration of Forbes Africa website. The client’s satisfaction with the previous migration prompted them to entrust us with the task of migrating CNBC Africa as well.
Why Next.JS was our client’s preferred choice
Next.JS, a powerful React framework, offers numerous advantages for web development. Here are some key points that we found relevant:
1. Server-Side Rendering (SSR) and Static Site Generation (SSG)
Next.JS provides built-in support for server-side rendering, enabling the rendering of React components on the server and sending fully rendered HTML to the client. This significantly improves initial page load times, enhances SEO, and provides a better user experience. Next.JS also supports static site generation, generating static HTML files at build time, further boosting performance and reducing server load.
2. Simplified Routing
Next.JS simplifies routing with its file-based routing system. By creating files in the `pages` directory, Next.JS automatically sets up routes for your application. This eliminates the need for manual route configuration and provides an intuitive way to structure your project. Additionally, Next.JS supports dynamic routing, allowing easy handling of dynamic parameters in the URL.
3. Incremental Adoption
One of Next.JS’s key advantages is its ability to be incrementally adopted into existing projects. Whether you have a small React application or a large-scale project, you can start using Next.JS by incorporating it into specific pages or sections of your application. This flexibility enables a smooth migration process and allows gradual utilization of Next.JS’s features.
4. Improved Performance and SEO
With Next.JS’s server-side rendering and static site generation, you can deliver optimized performance and improve SEO for your web application. By pre-rendering pages on the server, Next.JS reduces the time to first meaningful paint and provides content that search engines can easily crawl and index. This leads to better search engine rankings and an enhanced user experience.
5. Excellent Developer Experience
Next.JS prioritizes developer experience by providing features such as hot module replacement (HMR) for automatic code reloading, error overlay for easy debugging, and a rich development environment. The framework’s clear documentation, extensive community support, and frequent updates contribute to a pleasant and productive development experience.
Data Fetching
While the current CNBC Africa website (built with Frontity) fetched data using WordPress’s REST API, our super developer, Deepak, proposed implementing GraphQL for greater efficiency. Since we were utilizing less than 50% of the data retrieved from the REST API, we opted for WPGraphQL, a free and open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site. WPGraphQL even offers a GUI that allows us to create customized GraphQL queries within WordPress itself. Aside from a few external APIs that required a RESTful approach, we handled all WordPress data fetching using WPGraphQL.
Challenges
The project presented several challenges. Built-in components and utilities provided by Frontity, such as “html2react,” had to be replaced with alternative libraries and customized to suit our specific use case. Additionally, the entire data fetching process had to be rewritten due to Frontity’s different approach.
Results
An additional challenge arose with the “markets” section of the website, as the data had to be fetched from external sources and was somewhat complex. However, with the client’s assistance, we successfully resolved these challenges.
The outcome was a blazing fast-loading website! Since most pages were rendered using SSG, they loaded instantaneously. Except for pages containing market data, the rest of the website experienced minimal load times, if any.
Despite the client not requesting any cosmetic changes, we went the extra mile to ensure that the website closely resembled CNBC.com. Furthermore, we made UX improvements to the menu and homepage.
Our client expressed utmost satisfaction with our efforts, and our team takes great pride in being associated with such an excellent project.