Scaling WordPress with Next js || React Virtual Conference 2021

Awesome. Sounds great. So hey, everybody. We're going to talk about WordPress and how we can scale it with NextJS. So who am I? I know we had that wonderful introduction, but I'm the one hugging BB8 and Kylo Ren over there. I'm Colby Fayak. I work with the dev community as a developer advocate with Apple Tools. 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 probably 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. That's a huge percentage. And I'm not quite sure how accurate this number is and how they derived it, but if you look

at the number of detections on the built list site, it's over 800 million installs of WordPress

That's an absolutely 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 in a headless way

and use it to power our JAMstack sites in 2021. So to start, what does headless actually mean

Well, with our traditional stack, somebody visits a page in their browser. The browser reaches out to the server

The server will do the work like, request data from the database, then render that HTML for the page and return a response

If we're lucky, it'll return it cached. And finally, the browser displays that response to the

person. With a headless approach, that request to the server is asynchronous on the client typically

In this particular example, the person would visit a page in their browser and immediately get a

response straight from storage like AWSS3. Once the page loads in the browser, the browser will kick

off another request to a server, which can load in all the dynamic content

But I would imagine you'd be wondering, why would you 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 even hits the browser, which 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

The core of it, 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 app

This would serve as our JavaScript layer. We would use the WordPress API to provide some content and dynamic data

we would then compile that down to a static site using something like XJS

which along with a ton of other features is also a static site generator

Now, if this is all new to you, that sounds like a lot of work. Why not just use WordPress out of the box like we always do

Well, the great thing about the JAMstack sites is they have a lot of compelling features 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 server-based solutions like WordPress, there are a lot of options to help speed things up

For WordPress specifically, that includes things like plugins to cache, or maybe even some custom work under the hood

But each page is a server hit, which is still 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 that time rendering on the server, you serve a static

file straight from storage or from a CDN. While you can do that with the default WordPress

it's often much more complicated. And some of the plugins that cache might serve an HTML file

but they still serve it from a regular server, not static storage

With any server, we're typically paying for how much we expect our

traffic to be. While most of the time, that's pretty predictable. We all hope, but we all hope to one day have a post that goes viral, right

And if that happens, the people visiting our site are the ones that going to be paying for it with slow speeds or timeouts

There's of course solutions like load balancing and auto scaling, but those aren't perfect solutions and they might not

always still handle a really big surge in traffic. Back to the fact that we're serving these static HTML files

because we're serving straight from storage or better yet serving them directly from a CDN, Buzzword alert

that means that our user-facing website is going to infinitely scale. That static site will survive the Reddit hug of death when your post goes viral

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 the cost is going to quickly grow. While you have those options like load balancing and auto scaling, those services also

quickly add up. And without it, you risk your site slowing down or worse, downtime

The storage is cheap. It's really cheap. We can maintain huge static projects on AWS using S3 for a really low cost

But even with the, if we still manage server, the usage is going to be much, much lower with only content managers or requests at compile time

While there are a ton of headless options available in a headless word world

WordPress is still has a lot of features that makes it really compelling to use

One issue with a lot of the recent solutions is they seem to be developer focused

And that's not necessarily a bad thing, but you have to know your audience. If the ultimate goal is for that CMS to be used by people who are non-technical

you're providing an experience that people might struggle to learn and use. WordPress is the most used CMS in the industry

That means that most of our clients are probably already going to be familiar with WordPress

And there also a huge ecosystem already thriving around WordPress If you run into an issue you more than likely able to find someone who already ran into that issue with a quick Google search We can also take advantage of a lot of the community

solutions that extend WordPress. All right, so if WordPress is so great

let's see what it actually looks like. Well, 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 WP GraphQL

which is a plugin that we can add right inside of our dashboard, we also have the ability to query our WordPress data with GraphQL

So coming full circle, we can take advantage of this approach where we leverage the 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 NextJS, which I've created a NextJS WordPress starter

which lets anyone spit up a new static WordPress site with React framework NextJS super easily

I've set this up so that on our homepage, when we're compiling the site

we're first going to reach out to get the first set of posts like we commonly would see on a WordPress blog site

Those are passed as props to the page that's built out React, which I can then use to create a UI

just like I would with any other React app. Because NextJS won't know the routes ahead of time

I need to actually use dynamic routes. So we need to figure out all those pages

that it actually needs to create. So we grab all the posts and we create new paths

And we're telling Next to create a new page for every single one. I also wanted to include client-side search for the project

The WordPress Rest API provides search capabilities, but then we're going to still hit the server to do that

And since NextJS is built on top of Webpack, I was able to create a webpack compiler

that fetched all the posts at compile time. It would then create a search index with the titles and the paths and some metadata in a static file

It then loads that into memory or even asynchronously on the client

and then it makes the searches right to that index. And with all that, I was able to get together a WordPress site statically compiled with NextJS

The cool thing is we can couple this with WordPress plugins, like Yost and ACF

where we can give a lot of flexibility for managing our content. These work out of the box with NextJS WordPress starter

So I know all of you don't want to just see some screenshots of some code. So let's do a quick walkthrough

So here's what I'm going to go through. I'm going to first show you how easy it is to spin up a new site with the NextJS starter

But that project is probably too much code to walk through today. So I'm going to spin up a second NextJS site

And I'm going to walk you through how that works from a simpler perspective. All right

So grab your popcorn. Here's, let's get ready for the demo. So I'm going to share my screen

All right. So I'm going to start off with a pretty basic WordPress site

We can see here I'm inside WP Engine, where I have my WordPress site pulled up

And just to prove that it's a pretty simple default installation, we can see here

that under my posts, I have some post data. What I did was I used filorama.io to fill in some content

It's nothing actually meaningful. It's just episode data from Futurama, if you're familiar

But if we go into things like the pages, we can see the same thing. I have an About Us

or About and Contact Us page. And if we go to plugins, we can see that the only thing that I did

here, and I actually should have deactivated this before the demo, but we can see that we have

these plugins for a couple things. We have advanced custom fields, which I'll show you later

but we have WP GraphQL, which is primarily what we're going to be looking at today

So once we have that installed, the way we can install in the first place is going up to our ad new

where if we go over to search plugins, we can search for WP GraphQL

Oops. I don't know what keeps hitting enter for me. There we go. So we can see that I already have this active, but this is the

WP GraphQL plugin that you can install right inside the WordPress dashboard

But what that does is it gives us this new GraphQL tab. And if I go inside of this graphical IDE, which if you're familiar with something like Gatsby

you might have already used the graphical IDE, which simply put is a really nice and easy way

to query all of our data inside a WordPress. So instead of hitting that rest API, now what we can do is we can come over to this Explorer tab

and we can see that if I go through here with the posts and the edges and the notes

which this is referring to each of the different, basically an array of the data inside of my WordPress database

But we can see if I go down here, I can select things like, let me get rid of that since I already have it

but we can select things like my title and we have my URI

which let's click play. We can see immediately this is going to return back all those post titles

It's going to return our URI and let's see, what else do we want to add

We probably want our expert excerpt to show on the homepage and even our content

And again, since we just added that right on the side here, we get all that content immediately in those simple GraphQL queries

So let's see what this looks like in practice. I'm going to use my Next.js WordPress starter

Let me bring this up a little bit. But it's going to do is we're going to go through

And if you're not familiar with a Next.js. Or a Gatsby starter, we're going to run this simple command

And it's going to basically clone down this website as a template. And then we can see here, all we need to do after that is

this one environment file, which is going to set up the endpoint for us. So I'm going to do just that

I'm going to open up my terminal. I'm going to copy in this command

And let's see. Oops, it's already running. But typically I would put the folder name after that, but it's going to give an option

for us anyways. So what it's doing now is it's grabbing all those dependencies so it can actually find that

starter with next.js. And let's call it my WP XJS. That sounds good right So what that going to do is it going to do is it going to cloned down that template file like I was talking about but it also going to install all the dependencies since that part of the NextJS starter script or the example script in the NextJS world

So now that that's installed, let's CD into MyWP NextJS. I'm going to open that up in my code editor

Before we actually run this in the browser, let's actually poke around a little bit and see what's inside

So if you're familiar with NextJS, it uses file system-based routing. So we can see that I already have all these pages in here that you might typically expect from a WordPress site where the index is going to be your home page

We even have our post list page and we have a search page. But again, the next.js WordPress starter as is is probably a little bit too dense to take into account for this particular demo

But it's totally open source on GitHub if you want to take a look

But what we can do is we can add that.env.local file. and let me grab that snippet from the starter page where all we need to do is insert this WordPress GraphQL endpoint

And back on my actual WordPress site, if I grab this domain, this host from the front, because this is where I'm currently serving my website from, but what it will do is by default, WB GraphQL will make the slash GraphQL endpoint available to query all your GraphQL data

Let me make this HTTPS. So now I have my configuration set up

That's all I needed to do. So let's see what happens when I run Yarn Dev

which is the starting up a development server with NextJS. I'm going to open this up inside of my browser

I could probably just go to it here. And typical with NextJS

it's going to take a little bit of time to actually compile that first site

and it's going to make all those requests to get it from WordPress. But we can already see that it's doing just that

And we're also seeing some extra files in there. One of the cool things about the starter is

in addition to the site itself, we're also creating things like open graph images

While they're simple, it's just a better way to show up on your social feeds

But we're also creating that search index, and we're also creating an RSS feed and a site map

because those are all things that we want to make sure that we have inside of our blogs

So now we can see that my new NextJS starter was already set up

and we're going down through these pages, and we can see that that's exactly what we were seeing

inside of our WordPress admin. It's a bunch of these blog posts

And if we click through, again, it'll take a second to load because it's making those requests while it primes the cache

But now we can see that we even have that post page and it's being dynamically created based off of all that data that we have inside a WordPress

Now, we also have like our pages where that's going to automatically be up at the top

We can even configure that if we want with a WordPress menu, if you're familiar with the concept

so it's easier to manage inside the dashboard without having to make any hard-coded changes

But we also have the capability of making the searches, just like we were talking to that search

index, so the search is going to be super fast, which is pretty awesome, considering that it's

querying all of that WordPress data from your pages. But again, while this is really cool, in my opinion, it has a lot of features

It's just probably a little bit too much to dive into for this particular talk from a technical

perspective. So let's spin up our second, sorry, hopefully that didn't make sound, let's spin up our

second's WordPress site so we can actually dive into the technical bits. And to do that

I'm going to use this separate starter that I created. And it actually has a name. I have to fix that

But it's basically, I call it a WP GraphQL basic starter because what it really does is it's going

to provide the foundation of all that, where it's just going to set it up so that we can easily query

our post data. It just dumps them on the homepage with the, pretty much the default next j s starter itself and provide some dynamic pageouts so let's see what

that looks like i'm going to copy that command to open back up my terminal i'm going to cancel out my other

project let's level up we're going to run that yarn command again but let's let's call that my

w p graphQL app that sounds good to me so it's going to go through just like it did with the other

wordpress the next j s wordpress starter it's going to grab all those dependencies it's going to

to clone down that template and do exactly the same thing. So now let's see the into that

Just like before, it's going to have the same configuration that we saw with our other project

So because of that, I'm just going to simply copy and paste that same exact file that we did before

I'm going to create my .env. Local, and I'm going to paste in that same exact configuration

Let's see what happens when we spend this one up. That's not the right command

Just like before, it's now going to make our local host ready

I'm going to close that tab and open it up again. And we can see that already it looks kind of similar to the other starter

but this is a lot simpler. And we'll see what that looks like in a second here. But as we can see, just like before

we're actually dumping all these posts inside of the default NextJS WordPress or NextJS

starter site. If you're familiar, typically it looks like a few different cards that

get added onto that home page. So really, I'm just dumping the content in there to show a proof of how it works in an example

But just like before, we can navigate to the page. And while it's not the prettiest thing in the world, it's just showing how it works

from a basic perspective. So now let's go over to the code and see what that actually looks like

So just like before, it's using the file system based routing that NextGAS gives us as part

of the Next.js API. So to start off, we have our index

the JS file, where as we can see here, this is really just a React component, right

So what NextJS is able to do is it provides APIs that wraps React so that we can

fetch that data and inject it into our React app. And the way that we're doing this here is if we scroll all the way to the bottom, we're using

this function, which is the NextJS API called GetSatic Props, where the first thing we do is we're

going to get the Apollo client which the Apollo client is what we using to actually make requests with the GraphQL API And once we do we can see we have this query here that we simply sending up using the Apollo client

And it's going to send that to that URL that we configured inside of here

And it's going to grab all that post data. It's going to create it as a prop and even the page settings that we have here, pass them as props into our React component where we can use to build out the API

And we can prove what that looks like, but let me take this query here. I'm going to go back over to WordPress here for a second

where if I paste this directly in to my graphical playground, we can see the exact data that we're going to get

inside of the browser. The first thing, we're going to get that configurable title

in the description, but then we can see all that post data, which is exactly what we see on the homepage of our Nextjs application

So what we're doing there is we're able to query all that data, with GraphQL, which makes it really nice to grab exactly what we want and dump it into our React page

So that's just the homepage. Now for creating those dynamic page routes, we can see here we have this directory called posts

which again, Nextjs uses the file system based routing. So what this is first going to do is it's going to create a directory called posts

And then inside of it, we can see this URL or the file name is a little bit strange if you're not familiar with it

where here we're wrapping that word post slug with brackets. And what that's going to do is it's going to consider that post slug as a

parameter or an argument where it's going to allow that route to be dynamic for us

And the way that it works, I accidentally clicked. So if we look at this file, this looks pretty similar to what we had on our homepage

Where honestly, for this basic default starter, we can even see, I just cloned the home page just to provide this as a proof of concept, right

But if we again scroll all the way down to the page, we're actually scrolling past

get static props first. We're going to get static paths, which is again another next JS API

We're similar to before. We're going to grab our Apollo client. And we're going to make that request to get all the posts because in order to create all

the paths, we have to know what all posts actually exist, right? So once we grab that, we're able to loop through all these different posts

And we're going to say, for each of them, I want to. to have a post slug that's going to be available for each of those posts

So that means Next.js is going to go through and it's going to say for every single one of

those slugs, I'm going to send you a parameter so I can help you build a page for every single

one. So let's go back up to Get Static Props. So this is where that comes in, where every time

it tries to create one of those new pages, it's going to send in that parameter. We're here

we're grabbing that post slub, which is exactly what we had configured for the path. And then we're

going to inject that as a variable so that we can get that post by its slug

which we're then able to capture that data similar to what we did on the homepage and inject

that as a prop right into our application. If we scroll back up, just like before

it's going to allow us to create our UI, just like we would in any other React application

But ultimately, this all gets statically compiled. So let's see how that actually works too

If I run yarn build, I think I actually in my build command

if you want to actually have it statically output, so the way that NextJS works is when you run build

it's going to build it as a NextJS site, which would be all contained inside of this

NextJS folder. But if you wanted to actually build it so that it outputs static HTML

JavaScript, and CSS, so that you can deploy it anywhere with static storage

you also need to export the site. So we're going to do that just to show what that looks like. And in our build command, we're going to run Next Export. So let me build that again

It's going to go through. It's going to perform that same operation as it did before

We can see that it went through and built those posts just like before. But this time

it's going to provide that extra step. And it's going to create a static copy of our site

And we can see just that in this out folder where let me close these so it's a little easier to see

But in this out folder, we can open up our index file. And we can see that's just a step

HTML file. That's something that we can serve to any browser and it's going to be super

fast out of completely static storage. But ultimately, that's going to give us the same experience

right inside of our WordPress site where we can deploy that anywhere we want, but it's going

to give the benefits of being able to manage your content with WordPress, but also the same

benefits of being able to deploy that statically anywhere that you want on the web. And it's

going to be super lightning fast. So that's the end of my demo. Let me switch back

over to the slides. Okay

Cool. So let's recap a little bit about what we achieved here

So we reviewed our starting point, which was a basic WordPress instance

We set up a next day WordPress starter. We even set up a second NextJS site with the other basic WordPress starter

and we dug into a little bit of it, and we were able to see how it works. So the goal here wasn't to get you all to jump ship from your current CMS platform and go over to WordPress

but to show the flexibility of it and why it's still a compelling CMS to use, along with all the

other options available right now. We can come up with some pretty powerful solutions that provide a really

great user experience while also making it really performant and cheap. If you want to check out that work, please visit the NextJS WordPress starter on GitHub

It's completely open source. 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 about anything you've seen here at the talk, you can find me everywhere

at Colby Fayak. I'll tweet out a link with everything you've seen here today. Thanks, everybody