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

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood

Apidays New York 2024 - The value of a flexible API Management solution for O...apidays

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

Architecting Cloud Native ApplicationsWSO2

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Ransomware_Q4_2023. The report. [EN].pdfOverkill Security

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...apidays

AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

A Year of the Servo Reboot: Where Are We Now?Igalia

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Manulife - Insurer Transformation Award 2024The Digital Insurer

Real Time Object Detection Using Open CVKhem

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

Recently uploaded (20)

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu

Exploring the Future Potential of AI-Enabled Smartphone Processors

Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Apidays New York 2024 - The value of a flexible API Management solution for O...

How to Troubleshoot Apps for the Modern Connected Worker

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Artificial Intelligence Chap.5 : Uncertainty

Architecting Cloud Native Applications

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Ransomware_Q4_2023. The report. [EN].pdf

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...

AWS Community Day CPH - Three problems of Terraform

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

A Year of the Servo Reboot: Where Are We Now?

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Manulife - Insurer Transformation Award 2024

Real Time Object Detection Using Open CV

Axa Assurance Maroc - Insurer Innovation Award 2024

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