The only problem was that React snapshot and its alternative React Snap were not compatible with ReactJs v18, the current version I was on which was a bummer. To fix the problem, I had to either downgrade the version to 17 or below or forget about SEO which I wasn't very happy about. Guess what I did? I learned NextJs instead.
I learned how to use NextJs in 2 days with the help of Codevolution's NextJs playlist on Youtube (which is an awesome course by the way) and used the 3rd day to migrate the web app, all 7 pages to NextJs.
It was quite an exciting experience for me as I found NextJs quite easy to use given my ReactJs background and that NextJs is a framework for ReactJs.
I thought I was in love with ReactJs before, but now I'm even more in love with it because of Nextjs, and moving forward I will try to use NextJs as much as I can.
By the way, Nextjs is a ReactJs framework that makes working with ReactJs easier and faster because of the unique features it comes with like
- automatically defining your routes for you,
- prerendering your pages by default which is good for SEO,
- there is no need for 3rd party packages to inject metatags into your different pages as it has its inbuilt package for that,
- using CSS modules that allow you to scope CSS styles to a particular component so you don't have to worry about your style rules clashing and many other nicest feature.
If you are already familiar with ReactJs, I urge you to try using Nextjs. It would make coding so much easier and also make the online presence, SEO-wise, faster and better for whatever web app you are building. I will write more about NextJs later but for now, enjoy my mini-article/note.