Migration from Backlinko's Headless WordPress to Next.js [Part 1]

With Google adopting Core Web Vitals as a ranking factor in late 2021, more companies are recognizing the importance of a reliable architecture that supports website performance.

 

While we have worked with top-tier companies, this was the first time we collaborated with a company from which we could learn while also providing support. Therefore, when Backlinko reached out to us in May 2020 with the idea of creating the Next.js frontend for their website, we were truly excited.

1. Backlinko Story

Brian Dean, the founder of Backlinko and Exploding Topics, launched Backlinko in 2013. Since then, it has grown into one of the largest blogs and brands in the SEO industry. They focus on providing long, clear, and detailed explanations of SEO topics and trends. If you are involved in digital-related work (marketing, web development, business, etc.), you may have read articles from Backlinko.

 

I already knew that they had a large website. However, after the first call, when I took a detailed look at the WordPress theme they had, I was amazed at the amount of effort they had put in. They had dozens of types of landing pages and post templates. There were thousands of lines of CSS, a lot of legacy JS, and hundreds of components.

 

Backlinko may seem like a simple blog at first glance, but upon deeper inspection, it reveals itself to be a massive content machine.

 

Backlinko in Numbers

Over 1.3 million

Monthly Visits

Over 30,000

Number of Comments

Over 450

Number of Posts and Pages

 

1-1 Performance Issues

Long articles that include several images and user comments have a significant impact on performance. Additionally, Backlinko's WordPress theme development has accumulated a lot of legacy code over the years, which has also caused issues with page rendering, an increase in LCP (Largest Contentful Paint), and an increase in TTI (Time to Interactive).

 

Due to operating a slow and monolithic WordPress website, the Backlinko team considered decoupling the stack, believing that optimizing for Core Web Vitals would become the top business priority in 2021.

 

We have struggled with the loading speed of Backlinko for years. Due to the large number of high-resolution images and illustrations, the page size inevitably became large. Additionally, despite optimizing the WordPress theme as much as possible, the loading time was still slow.

 

Brian Dean
SEO Expert, Founder of Backlinko.com

 

1-2 Initial Contact

It all started when the CTO of Backlinko sent an email asking if we could migrate Backlinko's WordPress frontend to Next.js.

 

We respond individually to our customers' requests and support them to achieve the expected results. Although we were not commissioned, at Backlinko, we conducted a simple demo using various static site generators to demonstrate how much benefit can be gained from the Jamstack approach (presenting the pros and cons of all solutions and potential issues).

 

Seeing the performance of our content improve dramatically has greatly enhanced their first impression of us. Additionally, the idea that there is no struggle with cache strategies, no downtime, and easy scaling—meaning everything can be delivered from the edge—has opened up new possibilities for them.

 

So, you decided to do it together right away.

 

1-3 Timeline

We started work in late May 2020. We divided the project into smaller tasks and gradually began moving post templates, pages, and content components. It took nearly two months to complete all the work.

 

 

1-4 New Frontend

Backlinko was quite convinced from the beginning to use Next.js, but they were unsure if it was the best choice for them. There is no ultimate or best tool. By conducting Q&A and research for each client, we aim to find the most suitable tech stack for their use case by gaining a deeper understanding of their goals and needs.

 

Backlinko is a content-rich site, so we were concerned about the potential for unnecessarily large JS payloads. Therefore, we suggested Eleventy as an alternative. At that time, Eleventy had not yet seen significant adoption in the real world, primarily being used for personal blogs and small websites. The team involved in this project was not large, and the community was relatively small, which posed a certain level of risk.

 

When selecting a technology stack, it is essential to meet all business requirements. In this case, hybrid features such as immediate integration with previews and the React ecosystem became important factors. With a great community and Vercel behind Next.js, along with many case studies and proven projects, we were able to confidently recommend Next.js.

 

1-5 Headless WordPress

In addition to the complex setup of WordPress, the reason the Backlinko team adopted WordPress as their CMS is that they were satisfied with and had a good understanding of the content editing capabilities of WordPress.

 

We used WPGraphQL to separate the CMS functionality from the presentation layer. WPGraphQL is an open-source, free WordPress plugin that provides an extensible GraphQL schema and API for any WordPress site.

 

I have been following the development of the WordPress Rest API from the beginning, and it has made significant progress. After several years of development, it has become a stable version that can be used in any production. The WPGraphQL plugin has further enhanced the headless capabilities of WP.

 

You can easily obtain and render the necessary data without creating a large number of PHP wp_queries. Additionally, it works exceptionally well with Advanced Custom Fields (ACF), and in this case, structuring content in the CMS was the primary method.

 

It is worth noting that Backlinko has been using ACF for many years. During the transition to Next.js, there was no need to write a lot of custom code or change the structure of ACF. When we tried connecting the GraphQL plugin, it worked almost immediately in most cases.

 

1-6 Challenges of Still Images

　　

All posts and pages are static. Next.js automatically exports all pages as static HTML. Instead of fetching data from the API for each request, it fetches data only once per build. However, this has led to increased build times. These issues and fixes are explained in the Netlify blog.

 

1-7 Dynamic Comment Section

In addition to excellent content, Backlinko is also known for having open discussions with an active and engaging community about each article published. The blog page has received over 20,000 comments.

 

There are several ways to handle comments with Jamstack. The most common method is to rebuild every time a new comment is posted. However, that doesn't feel right and wastes the power of CI/CD.

 

Instead, I decided to prepare the first few dozen comments in advance. Then, I will use an excellent SWR library (a React Hooks library for fetching data remotely) to revalidate and fetch more comments on scroll.

 

This is how the system works.

 

• The readers visit the article and scroll down to the comments section.
• The first comment is pre-built, so it can be used immediately.
• swr revalidates comments and checks if the data is outdated. It fetches the next batch of comments.

 

You do not need to reload the page when new comments are displayed. SWR performs revalidation during focus and intervals. When the blog administrator approves a new comment, it is automatically synchronized for all visitors.