I am trying to create a website using React.js (using React Router, not u Next.js). liveitcourses.com is the name of the website which is still in progress.
But I am facing a strange issue. On every page of the website whenever I am trying to see the "view source", the tag body is showing empty. I am afraid if it is not showing the body contents in the view source, search engines will not be able to crawl my pages, hence bad impact on SEO.
I just started React a few weeks ago. Is it the normal React behaviour or should I need to correct it? If my understanding is correct then how can I make my website crawlable for search engines. Please suggest.
Here is the HTML, body tag is empty while title and other meta tags are present:
<html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Learn IT courses online in interactive and live classes."/><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/><title>Best online IT courses based on live classes and interactive programming sessions</title><script defer="defer" src="/static/js/main.80f62ed5.js"></script><link href="/static/css/main.53eb7892.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
That's how React is, a library for making SPA (Single Page Application), where everything is handled via JavaScript in the browser. For an application made entirely with React, indeed, the server send this empty HTML template with scripts to be executed. You can use the inspection tool to see your content after they are executed.
And yeah it's bad for SEO as Search Engine Crowlers are on hurry (there is a limited time for a page). If that's something that matter for your application, you should try Next.js, Gatsby... or use Server Side Rendering as known for decades with PHP, Node.js...
Reactjs is rendering code javascript with render in client, so if you view source code, you cant view it. if you click F12 and choose elements tab, you can view code is rended but it from load js file. So if you want to SEO for performance, you should choose SSR ( server side rendering), in reactjs is next.js, in vuejs is nuxt.js.