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
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 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.
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?
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.
Other SEO solutions with Next.js
In addition, Next.js helps solve title and meta tag problems on React projects. It stores the head component within the content. Thus, it provides the browser with all the metadata it needs (title, meta tags, or even images).
In a nutshell, Next.js is the best to avoid rendering issues and SEO problems.