Scaling WordPress with Next.js

Rate this content
Bookmark

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.

9 min
14 May, 2021

AI Generated Video Summary

WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

1. Introduction to WordPress and the Jamstack

Short description:

We're going to talk about WordPress and how we can scale it with Next.js. WordPress is still widely used, with over 800 million installs. Let's discuss how we can leverage WordPress to power static Jamstack sites. Headless architecture allows for asynchronous client-side requests and the use of Static Site Generators. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content.

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.

2. WordPress and the JAMstack

Short description:

We would compile the site to a static site using Next.js or another tool, which is a static site generator. JAMstack sites have built-in features for performance, reliability, and cost. Serving static HTML files is faster than server-based solutions like WordPress. Load balancing and auto scaling are not perfect solutions for handling traffic. Serving static files from storage or a CDN allows for infinite scalability. Storage is cheap, and managing servers can be expensive. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

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.

3. Leveraging WordPress APIs for Static Websites

Short description:

WordPress is available as a headless API with the support of the REST API and the WPGraphQL plugin. We can leverage APIs at compile time to produce static websites. With Next.js, a WordPress site can be statically compiled, providing flexibility and powerful solutions for a great user experience. Next.js WordPress Starter is open source on GitHub, and for more about the Jamstack, check out the book at jamstackhandbook.com.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
React Advanced Conference 2021React Advanced Conference 2021
21 min
Killing BFFs with GraphQL and Next.js
Frontend applications are getting more and more complicated, often delivering far more than just a UI. With this growing complexity comes a growing need for knowledge from the developers creating it, as they have to deal with matters like state-management, authorization, routing and more. In this talk, I'll show you how to use GraphQL in your Next.js application to create a data layer for your application, that exists between your frontend and your backend. In this data layer, you can handle complex matters to help you to keep your frontend application clean and "stupid".
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 

Workshops on related topic

React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.