Scaling WordPress with Next.js

Hey, everyone. We're going to talk about WordPress and how we can scale it with Next.js. So who am I? I'm Colby Fayok. I'm the one hugging BB8 and Kylo Ren over there. I work with the dev community as a developer advocate for Appletools. You can find me pretty much anywhere on the web by just Googling my name, as I'm the only one in the world.

So let's start off by addressing the CMS in the room. It's 2021, and some developers would cringe at the thought of WordPress. But frankly, we're still living in a WordPress world. According to Build with Trends, if we look at the CMS distribution of the top 1 million sites, 40% of websites are using WordPress. I'm not quite sure how accurate this number is, but if you look at the number of detections on the built with site, it's over 800 million installs of WordPress. That's a staggering number. While we might not all want to use WordPress, it's realistically around to stay for the foreseeable future. So let's talk about how we can take advantage of the King CMS and use it to power our static Jamstack sites in 2021.

So to start, what does Headless actually mean? With our traditional stack, somebody visits a page in the browser. The browser reaches out to the server. The server will do all the work like request data from our database, where it then returns the HTML for the page and returns a response. And if we're lucky, it'll return that cache. Finally, the browser displays that response to the person visiting the site. With a Headless approach, that request to the server is asynchronous on the client. In this particular example, the person would visit a page in the browser and immediately get a response straight from storage. Once that page loads in the browser, the browser will kick off another request to a server, which can load all the dynamic content. But I would imagine you'd be wondering, why would we want to make a client-side request to a CMS like WordPress? And that's not necessarily the recommended approach, that's where Static Site Generators come in to do the hard lifting before your page is the browser, which is what has given rise to what people now call the Jamstack.

Maybe you've heard of the Jamstack on Twitter, or maybe it's completely new, but what exactly is it? At the core, Jamstack sites are static HTML websites. This isn't a new idea, but it's a modern approach. Typically, they use JavaScript in the browser to make any request to your APIs that would provide dynamic data. Or they can use those APIs at compile time and serve that dynamic content without an extra client-side request. One example that we can imagine is building a React application. This would serve as our JavaScript player. We would want to use the WordPress API to provide the content and the dynamic data.

We would compile that down to a static site using Next.js or another tool, which, along with a lot of other features, is a static site generator.

Now, if this is all new to you, it sounds like a lot of work. Why not just use WordPress out of the box like we always do? The great thing about JAMstack sites is they have a lot of compelling features kind of built right in. By default, we're living up to what AWS considers a well-architected infrastructure. These are features that we all care about, like performance, reliability, and cost.

With most of the server-based solutions like WordPress, there are a lot of options to help speed things up. For WordPress specifically, that includes plugins to cache or some custom work under the hood. But each page is still a server hit, which is prone to its ups and downs. On the other hand, serving a plain, static HTML file is just going to be fast. Instead of spending time rendering on a server, you serve a static file straight from storage or a CDN. While you can do this with a default WordPress, it's often a lot more complicated. In some of the plugins, that cache might serve an HTML file, but they still serve it from a regular server, not storage. With any server, we're typically paying for how much we expect our traffic to be. While most of the time that's predictable, we all hope that one day one of our posts will go viral. And if that happens, the people visiting our site will be the ones paying for it with slow speeds and timeouts.

There are solutions like load balancing and auto scaling, but those aren't perfect solutions and might not always handle a certain traffic. Back to the fact that we're serving static HTML files, because we're serving files straight from storage, or better yet, static files directly from a CDN, buzzword alert, that means our user facing website is going to infinitely scale. That static site will survive the Reddit hug of death when your post goes viral. But managing servers isn't always cheap. While a low traffic personal blog can manage a few dollars a month, the more that traffic grows, the more that cost is going to quickly grow. While you have options again like load balancing and auto scaling, those services quickly add without it, you risk your site slowing down or worse, downtime. Storage is really, really cheap. We can maintain huge static projects on AWS using S3 for a really low cost. But even if we still manage a server, that usage is going to be much, much lower with only content managers or requests that compile time.

While there are a ton of headless solutions or options out there, it is a headless world WordPress still has a lot of features that makes it compelling to use. One issue with a lot of the recent solutions is they seem to be very developer focused, and that's not necessarily a bad thing, but you have to know your audience. If the ultimate goal is for the CMS to be used by people who are nontechnical, you're providing an experience that people might struggle to learn and use. WordPress is the most used CMS in the industry. That means most of our clients are already going to be familiar with WordPress. There's a huge ecosystem already thriving around WordPress.

If you run into an issue, you're more than likely able to find someone who already ran into that same issue with a simple Google search. We can also take advantage of a lot of community solutions that extend WordPress.

Alright, so if it's so great, let's actually see what this looks like. Since 4.7, WordPress by default now supports a REST API. This means right out of the box WordPress is actually available as a headless API. But taking that a step further, thanks to Jason Ball who created WPGraphQL, which is a plugin that we can add right inside of our WordPress dashboard, we have the ability to query our WordPress data with GraphQL.

So coming full circle, we can take advantage of this approach where we leverage APIs at compile time to produce static websites. Rather than waiting for a server request we'll have our entire WordPress site available as HTML documents. And I've done just that with Next.js, where I've created a Next.js WordPress Starter, which lets anyone serve up a new static WordPress site with React framework Next.js super easily. I've set this up so that on our homepage when we're compiling the site we first reach out to get the first set of posts, kind of like we would commonly see on a blog site. Those are passed as props to the page that's built out in React where then I can create the UI however I want.

Because Next.js won't know the routes ahead of time with a dynamic route, we need to figure out all of those pages it needs to create. So we grab all of the posts and then we create new paths for each one of those posts, telling Next.js to create a new page for each one. With all that and a little bit of glossing over, I was able to get together a WordPress site statically compiled with Next.js. The goal here wasn't to get you all to jump ship over to WordPress, but to show the flexibility of it and why it's still a compelling option along with all the others. We can come up with some pretty powerful solutions that provide a great user experience, while still also making it performant and cheap. If you want to check out my work, Next.js WordPress starter is completely open source on my GitHub. And if you want to learn more about the Jamstack, you can check out my book at jamstackhandbook.com. And that's it. If you want to learn more or chat about the talk, you can find me everywhere at Colby Fayhawk, my DMs are open and I'll also tweet out a link with some of the stuff you've seen here today.