Build a WordPress website in React within 30 mins. Which you can benefit from features like Server Side Rendering, 100% Lighthouse score, or code splitting.

1. IMRAN SAYED
@imranhsayed
with
Build Fast WordPress Site in React
in 30 minutes

2. 1.
What is headless CMS?
2

3. 3
Backend
Frontend

4. 4
Backend
Frontend
Decoupled CMS
API

5. 5
Backend
Headless CMS
API
Deliver
anywhere

6. “A decoupled CMS is proactive — it prepares content
for presentation and pushes it into a delivery
environment.
A headless CMS is reactive — it manages content,
then just sits and waits for some process to ask for it
- Deane Barker
6

7. 2.
Why headless CMS is
gaining popularity?
7

8. 8

9. Why headless CMS?
◈ Separation of concerns allows you to use
JavaScript UI libraries like React, Vue or
Angular to build your theme.
◈ These libraries allow to you to create richer
user experiences and help deliver a better
performance.
9

10. Why headless CMS?
◈ Flexibility
◈ Security
◈ Future proof
◈ Easy customization in front-end
◈ Faster development
10

11. 3.
Benefits of using
Headless WordPress
themes
11

12. 12
Performance Modern
Libraries
Security &
Scalability
Future
Proof

13. 13
If we build our front end in
JavaScript,
how would it affect our site’s SEO?

14. 14
How does Google indexing work on a
JavaScript powered application?

15. 1st wave or Initial
Indexing
● Crawl a page
● Fetch SSR content
● Re-rerun indexing
● New links to be crawled
Rendering takes place,
when resources are available to
render client side content.
2nd Wave of
Indexing
For JS powered apps
( rendering is deferred )
1st Wave of
Indexing
2nd wave of indexing,
On client-side rendered
content
Crawl
HTML
render
JavaScript
render

16. “The rendering of JavaScript powered website is
deferred until Googlebot has the resources
available to process that content
16

17. 4.
Server Side Rendering &
Client Side Rendering
17

18. 18
SSR in PHP
PHP Code + Db Logic
PHP
Server
URL 1 URL 2 URL 3

19. 19
CSR
Empty HTML & Js
Files
Static
Server
URL 1 URL 2 URL 3
API

20. 20
SSR
Page is Viewable
JS is Loaded
Viewable and Interactable

21. 21
Empty Body
JS is Loaded
Viewable and Interactable
CSR

22. 22
SSR + CSR
Page viewable &
Interactable
Reload on each
request
Empty HTML
Client side nav
Without reload
Page viewable &
Interactable
Client side nav
Without reload
SSR CSR

23. 23
SSR + CSR
JavaScript
Node
Server
URL 1 URL 2 URL 3
API

24. 5.
Why use JavaScript
themes with WordPress?
24

25. Why use JavaScript themes with WordPress?
◈ Modern, fast and engaging web experience
◈ With CSR, rendering happens on your device
than the server, so it feels like a native app
◈ Adding JavaScript to your php theme an be
difficult to maintain
25

26. 6.
Problem using
JavaScript themes
26

27. 27
PHP theme in PHP Server
PHP Theme HTML & JavaScript
HTML
PHP Server Browser

28. 28
PHP Server is not able to run
JavaScript
JavaScript Theme HTML & JavaScript
PHP Server Browser
Empty HTML
JS files

29. 29
Node Server is able to run JavaScript
JavaScript Theme HTML & JavaScript
NodeJS Server Browser
HTML
JS files

30. 30
SSR in
React

31. JavaScript Frameworks
31

32. 7.
Choices available for
JavaScript Framework
32

33. 33
JavaScript Frameworks
● React Framework
● SSR
● Static site
generator
● General use
● Works with
WordPress if you
know GraphQL
● React Framework
● SSR
● Ready for
Serverless
● General use
● Manual connection
to REST API
● React Framework
● SSR
● Ready for
Serverless
● Focussed on
WordPress
● Works with
WordPress out of
the box
● Vue Framework
● SSR
● Similar to Next,
but for Vue
● General Use
● Manual
connection to
REST API

34. 8.
Introduction to Frontity
34

35. What is Frontity?
An open source framework to develop
WordPress themes based on React JS
35

36. How does Frontity work?
36

37. How does SSR + CSR work in
Frontity?
37

39. How does it work?
39
◈ Use WordPress dashboard for content
management
◈ Auto update of content on front-end, without
having to rebuild
◈ Frontity app lives in Node.js server
◈ In future it will be capable of generating AMP
pages with the same React code and CSS

40. Why should you use Frontity?
40
◈ First React framework 100% focused on
WordPress
◈ Zero setup development
◈ Extensibility
◈ Server Side Rendering
◈ It’s rendered dynamically
◈ Code Splitting
◈ 100% Lighthouse

41. Frontity Twentynineteen theme
41
https://www.npmjs.com/package/@frontity/twentynineteen-theme

42. Frontity Contact Form 7
42
https://www.npmjs.com/package/frontity-contact-form-7

43. What about WooCommerce?
43

44. wp-decoupled
44

45. 9.
Installation and Setup
45

46. References
◈ https://frontity.org/
◈ https://github.com/rtcamp/wp-decoupled
◈ https://www.npmjs.com/package/@frontity/twentynin
eteen-theme
◈ https://www.npmjs.com/package/frontity-contact-
form-7 46

47. learn.rtcamp.com

48. codeytek.com

50. Imran Sayed
@imranhsayed
50