What I wish I had known about single page applications

A SPA doesn't have to be all the way SPA. It can be a hybrid and I'm not necessarily talking about React/SSR and other new shiny technologies. Can be as simple as an AJAX request. The famous Like button couldn't be a form that would have to be submitted for the request to happen.

A rule of thumb that I usually follow is that for public-facing websites/apps, you have to serve HTML from the server for all the cases you've mentioned. For apps behind a login form, you can get away and actually go very far with a SPA and it will make a difference to the experience if you put in the work.

If you do want to continue your journey, I would recommend checking out Next.js and Gatsby. They're both two great platforms to create static sites, SPAs and SSR web pages using React.js. They def both deserver the investment because building these kinds of architectures have become extremely complicated IMO.