SEO helps you to find new users and promote your brand on the top pages of search engines. Learn how Server Side Rendering ( SSR ) for React applications can help in SEO and increase your site's performance. And how to connect Next.js with WordPress. Google's two waves of indexing. We will learn: 1 - Importance of SSR in JavaScript applications. 2 - How Next.js can make development super fun and easy. 3 - Connecting Next.js with WordPress using the WordPress REST API.

1. @imranhsayed ImranSayedDev

2. 1.
CSR Vs SSR
2

3. CSR

4. SSR

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

6. SSR
Page is Viewable
JS is Loaded & React is executed
Viewable and Interactable
6

7. 2.
Google’s
Crawling &
Indexing
7

8. Crawling and Indexing
8

9. What is Crawling?
▸ It literally means following a path
▸ In SEO World, it means following your link
▸ Create sitemaps containing all links of the blog
▸ Robot.txt blocks search engine bots and helps index
and crawl important parts of our blog.
9

10. What is Indexing?
▸ process of adding web pages into Google search
▸ Let only vital parts be indexed ( for higher google
ranking )
▸ By default, every WordPress post and page is indexed
10

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

13. 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.
1st Wave of
Indexing
2nd Wave of
Indexing
For JS powered apps
( rendering is deferred )
2nd wave of indexing,
On client-side rendered
content

14. 3.
Problems
with CSR
14

15. Problems with CSR
▸ Source code is blank.
▸ Content is rendered by JS on client side.
▸ Complicates things for Search engines.
▸ Google can handle it upto some extent.
▸ Google bots read content ( loaded asynchronously )
only for first few seconds.
▸ Rendering the JS powered web pages takes processor
power and memory for Googlebot.
▸ With Google’s two wave indexing, it could take a few
hours to a week before the content can be crawled
and indexed. 15

16. 4.
Benefits of
SSR
16

17. Benefits of SSR
▸ SSR renders faster at initial request
▸ Doesn’t require as many round trips to the
server.
▸ No blank page flicker( unless loading image )
▸ Helps in SEO - content is already present.
17

18. 5.
SSR in JS
Powered Apps
18

19. 1.Using
React
19

20. 2. Using
Frameworks
20

21. 6.
How does
Next.js work?
21

22. How does Next.js work?
▸ It provides a server in Node.js, which renders
requested website
▸ Requests data from API > Generates it in HTML code
on server > Sends the HTML to browser
▸ Uses Webpack to bundle and Babel to convert to
Modern JS out of the box.
22

23. Serverless Next.js
▸ Next.js 8 enables serverless deployment
▸ Applications are split into smaller parts, or lambdas,
that let code be run on demand and scale
automatically.
▸ Each page in the pages directory becomes a
serverless lambda
23

24. Who is using Next.js
▸ https://nextjs.org/showcase
24

25. 7.
Features Next.js
25

26. Features of Next.js
▸ SSR React Applications
▸ SEO Friendly
▸ Code Splitting ( Split our application code up into a
series of lightweight bundles )
▸ HMR ( Instead of reloading an entire application when
code is changed, HMR will only recreate modules that
have been altered )
▸ Import Header & include your own meta tags
26

27. Features of Next.js
▸ Works with CSS in JS
▸ Handles routes for you out of box
▸ Can be used with node frameworks like express, hapi,
koa etc.
▸ Create clean url.
▸ Built in Error handling and 404 page.
27

28. Frontity
twentynineteen
theme
28

29. Twentynineteen theme for Frontity
29
▸ https://www.npmjs.com/package/@frontity/twentyni
neteen-theme

30. Credits
▸ CSR vs SSR flow diagram - Alex Grigoryan
▸ Google I/O 2018
30
Video Tutorials
▸ https://youtu.be/ey0NeAkE8Uo

31. Thanks!
Imran Sayed
31
@imranhsayed ImranSayedDev