We often hear people saying that NextJs is SEO-friendly and ReactJs is not. And hence NextJs is better if you want to rank your website in google searches. But why is that? So to answer that, we will discuss that in this blog.
Content list
What is SEO?
How websites are ranked?
How ReactJs work?
How NextJs work?
Conclusion
What is SEO?
SEO or Search Engine Optimization. In simple terms, it's the process of optimizing your website to rank higher in the search results on search engines like Google, Bing, etc. The better the SEO of your website, the higher it ranks in the search results, making it easy to grab the attention of the users.
How are websites ranked?
Ok, so now we know what SEO is. But how it is decided that your website has better SEO than mine? Search engines (for example Google) have their bots crawling the internet. These bots(also called crawlers) crawl the HTML of the different websites on the web and analyze the keywords that are present on these crawled websites and store this data in a database.
When you type a word or phrase into your search engine, it uses special algorithms to find websites that are matching the keywords that you have entered and fetch the websites from the huge Database and shows you the search result based on the SEO of all the websites.
Obviously, the SEO of the website doesn't only depend on the contents of a webpage/website. There are a lot more factors like the structure of the HTML on the webpage, links present in the webpage, etc. But for our will take in attention only the content of a website.
How ReactJs work?
ReactJs uses something called CSR or Client-side rendering. When a website is visited which uses CSR, these things happen
You visit a webpage: The client sends a request to the server
The server sends the Javascript code of the webpage to the client
This Javascript is run on the client and the page is loaded
Hurray, you can see the webpage
Due to the CSR nature of the ReactJs page, when the search engine crawlers crawl the webpage, they can't find anything, because the HTML was not loaded at that time. Which makes the webpage lesser SEO friendly.
How NextJs work?
Unlike ReactJs, NextJs can use something called SSR or Server-side rendering. When a website visited which uses SSR, these things happen
You visit a webpage: The client sends a request to the server
The server runs the Javascript code on the server itself and then sends the generated HTML to the client
This HTML is then loaded on the client
Hurray, you can see the webpage
In SSR, since the HTML is already loaded on the client when the crawler visits it, it can crawl the content easily. Hence, making it more SEO-friendly.
Conclusion
This concludes that SSR is better than CSR in terms of SEO, and since NextJs uses SSR, it's better for SEO than ReactJs which uses CSR for loading a webpage.
What are your thoughts on this? Let me know in the comments.