Scaling WordPress with Next.js

•

0 likes•29 views

The document discusses how to scale WordPress using Next.js and headless architecture. It introduces Next.js and how it can be used to build static and server-rendered WordPress sites using WordPress API and plugins like WPGraphQL to fetch content. This allows WordPress content to be delivered as performant, pre-rendered sites while keeping content and admin in WordPress.

Technology

Next.js
@colbyfayock
Scaling WordPress
with

Colby Fayock
Sr Dev Experience Engineer
@colbyfayock

Human
Storage
Headless + Clientside
Browser Server

Human
Storage
Browser
Server
Media
Payments
Headless + Static

Cost
First 300gb / mo
$2.30
$0.023 / GB
Add $0.0004 / 1k GET Requests
FREE
then $55 / 100 GB
Measured as Bandwidth
$2.00 - $2.30
$0.020 - $0.023 / GB
(Depending on Region)
Add $0.0004 / 1k GET Requests

getServerSideProps
Human
Browser
Server
Database

getStaticProps
Compile Time
Static
Storage

Demo
Install WPGraphQL
Query WordPress data
Bootstrap new Next.js app
Deploy to Netlify

Colby Fayock
Thank You
@colbyfayock
colbyfayock.com/allthingsopen
Sr Dev Experience Engineer

Similar to Scaling WordPress with Next.js

Azure and web sites hackaton deckAlexey Bokov

Edi react fastandbeautifulDoug Sillars

Fastandbeautiful krakowDoug Sillars

Web Optimization Level: Paranoidrobin_sy

Fastandbeautiful devdayseuDoug Sillars

Fastandbeautiful mobilewarsawDoug Sillars

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller

Fastandbeautiful yglfDoug Sillars

Snowcamp fastandbeautifulDoug Sillars

Deep crawl the chaotic landscape of JavaScript Onely

Performance as UX with Justin HowlettFITC

Frontend WorkflowDelphiCon

(In)Security Implication in the JS UniverseStefano Di Paola

Fastandbeautiful gdgtartuDoug Sillars

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas

Big Data Analytics with Google BigQuery. By Javier Ramirez. All your base Co...javier ramirez

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

CSS and image optimizationStoyan Stefanov

Digital Olympus Technical SEO Findings Whilst Taming An SEO BeastDawn Anderson MSc DigM

ImageCon CTO keynoteCloudinary

Similar to Scaling WordPress with Next.js (20)

Azure and web sites hackaton deck

Edi react fastandbeautiful

Fastandbeautiful krakow

Web Optimization Level: Paranoid

Fastandbeautiful devdayseu

Fastandbeautiful mobilewarsaw

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...

Fastandbeautiful yglf

Snowcamp fastandbeautiful

Deep crawl the chaotic landscape of JavaScript

Performance as UX with Justin Howlett

Frontend Workflow

(In)Security Implication in the JS Universe

Fastandbeautiful gdgtartu

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

Big Data Analytics with Google BigQuery. By Javier Ramirez. All your base Co...

Progressive Enhancement 2.0 (Conference Agnostic)

CSS and image optimization

Digital Olympus Technical SEO Findings Whilst Taming An SEO Beast

ImageCon CTO keynote

Recently uploaded

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Tech Trends Report 2024 Future Today Institute.pdfhans926745

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

A Domino Admins Adventures (Engage 2024)Gabriella Davis

Partners Life - Insurer Innovation Award 2024The Digital Insurer

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Recently uploaded (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Strategies for Landing an Oracle DBA Job as a Fresher

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Tech Trends Report 2024 Future Today Institute.pdf

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

AWS Community Day CPH - Three problems of Terraform

Powerful Google developer tools for immediate impact! (2023-24 C)

Finology Group – Insurtech Innovation Award 2024

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

Handwritten Text Recognition for manuscripts and early printed texts

Data Cloud, More than a CDP by Matt Robison

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

A Domino Admins Adventures (Engage 2024)

Partners Life - Insurer Innovation Award 2024

Boost PC performance: How more available memory can improve productivity

How to Troubleshoot Apps for the Modern Connected Worker

Scaling WordPress with Next.js

1. Next.js @colbyfayock Scaling WordPress with

2. Colby Fayock Sr Dev Experience Engineer @colbyfayock

3. techcrunch.com

4. starwars.com/blog

5. snoopdogg.com

8. trends.builtwith.com w3techs.com

9. trends.builtwith.com 32%!

10.

11. ?

12.

13. WordPress API

14. What is “headless”?

15. Traditional Human Browser Server

16. Human Storage Headless + Clientside Browser Server

17. Human Storage Browser Server Media Payments Headless + Static

18. Headless WordPress

19.

20.

21. WordPress + GraphQL

22.

23. WPGraphQL

24.

25.

26.

27.

28. WPGraphQL + Plugins

29. WPGraphQL + Plugins

30. WPGraphQL + Plugins

31. WPGraphQL + Plugins

32. WordPress at the Edge

33. Jamstack

34. Performance

35. Performance

36. Reliability

37. Reliability

38. Reliability

39. Cost

40. Cost First 300gb / mo $2.30 $0.023 / GB Add $0.0004 / 1k GET Requests FREE then $55 / 100 GB Measured as Bandwidth $2.00 - $2.30 $0.020 - $0.023 / GB (Depending on Region) Add $0.0004 / 1k GET Requests

41.

42.

43.

44. ✋

45. 👀

46. getServerSideProps getStaticProps

47. getServerSideProps Human Browser Server Database

48. getStaticProps Static Storage

49. getStaticProps Compile Time Static Storage

50. Next.js WordPress Starter

51. Homepage

52. Homepage