Migrating to Headless WordPress and Next.js with Backlinko [Part 1]

With Google adopting Core Web Vitals as a ranking factor in the second half of 2021, more companies are recognizing the importance of a reliable architecture to support website performance.

 

Although we have worked with top companies and jobs, this was our first time working with a company that not only supports us, but also allows us to learn. So when Backlinko contacted us in May 2020 with the idea of creating a 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 prioritize providing in-depth and easy-to-understand explanations of SEO topics and trends. If you work in a digital-related field (such as marketing, web development, or business), you may have read articles from Backlinko.

 

I already knew that they had a large website. However, after thoroughly examining their WordPress theme during our first call, I was amazed by the amount of effort they had put into it. They had dozens of landing pages and post templates. There were thousands of CSS lines, numerous legacy JS, and hundreds of components.

 

Backlinko may seem like a simple blog at first glance, but upon closer inspection, it became clear that it is 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 with multiple images and user comments can have a significant impact on performance. In addition, Backlinko's WordPress theme development has accumulated a lot of legacy code over the years, causing issues with page rendering, increased LCP (Largest Contentful Paint), and longer TTI (Time to Interactive) times.

 

After operating our website using a slow and monolithic WordPress, we realized that optimizing for Core Web Vitals would become our top priority in 2021. As a result, the Backlinko team considered decoupling our stack.

 

We have been struggling 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 and founder of Backlinko.com

 

1-2 Initial Contact

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

 

We support our customers individually to ensure that they achieve the expected results. At Backlinko, we conducted a simple demo using various static site generators to demonstrate the concept (presenting the strengths and weaknesses of all solutions and potential issues) in order to show how much benefit can be gained from the Jamstack approach, even though we were not specifically requested to do so.

 

By directly witnessing the significant improvement in the performance of our content, our first impression of us has greatly improved. In addition, the idea that we can provide everything from the edge without struggling with cash strategies, downtime, and easy scaling has brought them new possibilities.

 

So, they immediately decided to do it together.

 

1-3 Timeline

We started working in late May 2020. We divided the project into small tasks and gradually began moving post templates, pages, and content components. It took us almost 2 months to complete all the work.

 

 

1-4 New Frontend

Backlinko was convinced to use Next.js from the beginning, but they weren't sure if it was the best choice for them. There is no ultimate or best tool. We conduct Q&A and research for each client to better understand their goals and needs, allowing us to find the optimal technology stack for their use case.

 

Backlinko was concerned about the unnecessary large JS payload that would occur due to the large amount of content on the site. Therefore, we proposed Eleventy as an alternative. At the time, Eleventy did not have a large track record of implementation in the real world and was mainly used for personal blogs and small websites. The team involved in this project was not large and the community was relatively small, so there was (in a sense) a risk.

 

When selecting a technical stack, it is essential to meet all business requirements. In this case, hybrid features such as the ability to integrate with previews and the React ecosystem quickly became important elements. Behind Next.js is a great community and Vercel, and with many case studies and successful projects, we were able to confidently recommend Next.js.

 

1－5 Headless WordPress

In addition to the complex WordPress setup, the reason why the Backlinko team adopted WordPress as a CMS was because they were satisfied with the potential for content editing and had a good understanding of it.

 

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

 

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

 

You can easily retrieve and render the necessary data without creating a large number of PHP wp_queries. In addition, it works great with Advanced Custom Fields (ACF), making it the main method for configuring content in this case.

 

It is worth noting that Backlinko has been using ACF for many years. In the transition to Next.js, there was no need to write a lot of custom code or change the structure of ACF. When we connected 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 to static HTML. Instead of fetching data from the API on each request, it only fetches data once during build time. However, this has led to an increase in build time. These issues and their fixes are explained in Netlify's blog.

 

1-7 Dynamic Comment Section

In addition to excellent content, Backlinko is also known for engaging in open discussions with a vibrant and attractive community for each published article. 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, this is not ideal and wastes the power of CI/CD.

 

Instead, we have decided to create the first few comments in advance. Then, we will use an excellent SWR library (a React Hooks library for fetching data remotely) to revalidate and retrieve more comments through scrolling.

 

This is how it works.

 

• Readers will visit the article and scroll through the comments section.
• First comment is pre-built so it can be used immediately.
• swr performs revalidation of comments and checks whether the data is outdated. Get the next batch of comments.

 

No need to reload the page even if new comments are displayed. SWR performs revalidation when focused and at intervals. When the blog administrator approves a new comment, it will be automatically synchronized with all visitors.