The document discusses the evolution of WordPress as a headless CMS, highlighting the transition from the REST API to GraphQL for more efficient data fetching. It explains the benefits of Jamstack architecture, including speed, security, and improved developer experience, along with practical implementation examples. The overall focus is on leveraging WordPress with modern tools like React and GraphQL to create fast, decoupled sites.

1. @muhsinlk
WordPress on the Jamstack
TOPIC

2. Muhammad
Muhsin

3. A brief history

4. WordPress REST API

5. Started off as a WordPress Plugin
👏
Merged in to Core in WordPress 4.7

6. WordPress as a Headless CMS!
⚡
a.k.a. Decoupled WordPress

7. You could use parts of WordPress now,
instead of the whole monolithic
software 🙌

8. REST is great, but...

9. 🐢 Slow
☁ Constant over/under fetching
🎛 Needs multiple requests
Drawbacks of REST API

10. Enter GraphQL

11. ⭐ GraphQL is a query language for your API
📢 Ask for what you need, get exactly that
󾠮 Single endpoint
Why GraphQL
📚 Get many resources in a single request

13. WPGraphQL
● Exposes WordPress data as GraphQL schema
● Created by Jason Bahl
● Extendable via WordPress plugins
HOW TO

14. Jamstack

15. Fast and secure sites and apps delivered by
pre-rendering files and serving them directly
from a CDN, removing the requirement to
manage or run web servers.
JAMSTACK.ORG

17. Static Site Generation

18. Content
Template
Static Site
Generator
Static Site

20. Why Jamstack?

21. ⚡ Blazing fast by default
🔐 Super secure
💰 Free and open-source
🛠 Developer Experience (DX) and Tooling
⭐ Content Mesh
📚 Easy to get started and learn React, GraphQL quickly
💯 Perfect Lighthouse score — SEO, a11y, PWA

24. GraphQL
● Ask for what you need, get exactly that
● An alternative to REST API
● Single endpoint
● Get many resources in a single request
● Created by Facebook, now open source
HOW TO

25. ❤

26. 1. Fantastic Gutenberg Editor for an amazing writing
📝 experience!
2. Build with modern/favorite developer tools 🛠
like React and GraphQL!
3. Get a blazing fast ⚡ website!
The 3 wins!
WHY

27. Demo 🎬

28. Starting a Project in Frontity

29. npx frontity create my-project
cd my-project
npx frontity dev

30. WP Decoupled App
https://github.com/rtCamp/wp-decoupled
by rtCamp

31. Gatsby WooComerce Theme
https://github.com/sagarnasit/gatsby-theme-woocommerce
by Sagar Nasit

32. muhammad.dev
https://github.com/m-muhsin/muhammadmuhsin.com/
– a WordPress/ Gatsby site

33. Gatsby WPGraphQL Apollo
https://github.com/m-muhsin/gatsby-wp-graphql-apollo
– a simplified Gatsby site using Apollo
for a live connection to WordPress

34. What we covered
● WordPress + Jamstack
● REST API, WPGraphQL
● Demo
● Jamstack
SUMMARY
● Some examples

35. let us = {...goodness};
Let’s spread the goodness of Decoupled WordPress!

36. decoupled.blog

37. Thank you! 🙏
@muhsinlkMuhammad Muhsin
muhammad@rtcamp.com

38. rt.camp/join
We are hiring! 🤗

39. Credits - Image Sources
● Unspash for images
● Jamstack
● Jamstack website
● Static Site Generators: Content Laptop Gears
● Why Jamstack
CHOOSE