React SEO: Problems and Best Solutions

React is a single-page application. It implements an App Shell Model on websites that most of the content is rendered on the client side by default.

When the server receives a request from a user, it responds with an HTTP response. In this response, the server is not sending the entire page’s content. The HTTP response mostly contains the React JS library. Therefore, when you inspect the page and view the source code of the page, you will see two different HTML codes.
Because the website only has a single page, the server does not send the entire page for each time. Most parts of the page will be the same; however, React will change the state of the component.

What are the advantages of React.js?

As previously stated, the server does not send all of the requested data for each request. It allows you to improve the speed of the website.

What are the main SEO problems with React JS?

Generally, React js is good for SEO as it improves the user experience on websites. There are some problems:

Status code errors

Generally, the server is not loading the entire page. Actually, it happens on the client or browser side. Therefore, you may see some errors like these:

4XX status code cannot be executed properly
You may experience 3XX redirect problems

Solutions for status code errors
Google sometimes follows Javascript redirects, but other search engines definitely do not. Therefore, you have to think about Next.js. We will talk about it.
Create a 404 error using the React Router framework. Use noindex for 4xx pages.

Do not use hashed URLs

In general, developers use "#" symbol on URLs. Avoid using it on the website because Google cannot read the part of the URL after the hash symbol. Next.js would be a great opportunity to solve the issue.

Rendering problem

Rendering JavaScript is not an easy task for the server. Because of the large React libraries, it takes long time to load. Therefore, you have to think about alternative solutions.

Rendering with React

There are two main options:

Server-side Rendering (SSR)
Pre-rendering, Static Site Generation, or Static Rendering (SSG)

Actually, there are not many differences between the options. The key factors are the number of pages and the dynamic contents.

What is server-side rendering (SSR)?

All rendering logic happens on the live backend. This is the best option for bigger websites with dynamic content. A user sends a request to a web server; the latter returns a fully rendered HTML view to the client. However, it is an expensive and time-wasting option because it uses servers.

What is pre-rendering?

Before SSR, developers had a tendency to create static HTML documents and host them on the server. Imagine that, the server gets a request and immediately sends static HTML as a response. In this manner, the server does not render anything, and the browser only executes a small part of the data. This is the same.
They pre-render JavaScript into an HTML document. This happens when developers deploy the code or administrators change the content on the website. The coder discriminates the response between real users and search crawlers.
When a real user sends a request with a URL, the server immediately generates a response code. The browser parses the code and makes it viewable content for users.
But when Googlebot sends a request, the server the prerendered static files for it. This is inefficient for larger websites.

What is the best practice?

Hybrid option

It allows you to use both options on the same project. Imagine, some parts of the website are using SSR and other parts are pre-rendering. It is possible with Next.js

Advantages of using Next.js

SSR is possible with ReactDOMServer. However, React's framework Next.js enables you to do both SSR and pre-rendering in a more efficient manner. It uses Automatic Static Optimization, which helps you do it.