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.
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
12.
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
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
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
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
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