1. Pre-requisites

You need to know what is react and how it works.

2. Introduction

  1. In a React Project, you have to maintain separate backend projects for your API-routes.
  2. It does not provide out of the box routing (you have to use react-router-dom).
  3. Biggest Issue → React was not SEO optimized, not because of the components, I’ll discuss below.
  4. Waterfalling Problem.

2.1 SEO Optimization Problem

2.1.1 Crawler → How does google find your website ?

  1. Constantly hitting websites and checking what they do.
  2. Ranking them based on relevance.

2.1.2 Example problem

When someone looks for 100xDev course on google, and if the html file after npm run build has these word i.e. 100xDev, course, in the start of the html file, then it would point the user to this website and rank it on the top.

Now the problem is this → the .html file after npm run build doesn’t have the contents of the website and the crawler doesn’t even go through the entire website html, so even if the common words that the user is searching are present on your website, it still doesn’t make sense.

For example, look at this screenshot. This is the website www.aryancodes.dev →

image.png

and this is the .html file for it →

image.png

If you see and compare the elements present in the website and in the index.html, there is a huge gap. All the content is in the root div and in the index-365u-rs.js. NextJS fixed this!