ChesslaBlab Blog

Apr 24, 2023 by Jordi Bassaganas

Let Crawlers Index Plain React Pages Without Next.js

By writing the static content in the public folder

Let Crawlers Index Plain React Pages Without Next.js Photo by Stem List on Unsplash

A reason why Next.js is often preferred over plain React is for SEO purposes. Unlike the single page application (SPA) paradigm where the server sends all of the application's code in one single HTTP request, with Next.js the HTML code of the page is generated on each request.

It is uncomplicated to find out whether or not a web app is an SPA or an MPA. Just visit the web page you want to inspect, right-click on it and then click on the View page source button.

If the source code contains a few dozen of lines with plenty of different HTML tags such as main, article, section, h1, h2, h3, p, in other words, if there's search engine indexable content, chances are it is a multi-page site. Instead, if the code contains few lines and basically what it does is load one or more JavaScript files most likely it is a single-page application. is an example of SPA using plain React.

Figure 1

Right-click on and view the page source. The main page hardly contains any HTML tags.

To some extent, server-side rendering (SSR) with JavaScript pretty much resembles the classical multi-page web application (MPA) paradigm which has been out there for years. A main difference though in my opinion is that SSR with JavaScript is way more complicated than SSR with a classical server-side programming language like PHP, Python, Java or Ruby.

Server-side programming languages are easier to learn than Next.js. A great example is the Laravel framework for PHP which is a popular choice among web developers to create apps effortlessly.

But did you know there's a way for web crawlers to index the HTML content of a plain React app?

Let's say you're working on a non-indexable plain React app and want to write search engine indexable content for the About page while staying away from the intricacies of server-side rendering with Next.js.

Because you want to do things effortlessly.

In this particular case, create a subfolder called documentation inside the public folder, and then write the HTML content in a new file called index.html. Well, this is what I did to get the content of, which is a React app created with create-react-app, indexed by search engines.

The Documentation page contains lots of technical content intended for web developers. It is working quite well for keywords like chess api.

Figure 2

Right-click on and view the page source.

Figure 3

The source code of the documentation page contains plenty of HTML tags. It is available in the chesslablab/website repo on GitHub. This approach works out quite well as long as the content to be indexed is static.

Thus, if you're a static site generator (SSG) developer who doesn't want to mess around with Next.js, or just feel comfortable with manually editing HTML files, you may want to write your pages in the public folder.

I hope this approach will be helpful to you.

Thank you so much for reading!