TL;DR: Search engines have limited resources. They can not crawl each web site and page (especially millions of smaller ones) with a real browser. So, they can not render JavaScript content! Yes, Google says they do, but they don't do it consistently - because they don't have the resources to open each site/page in a browser. So, help them out. Serve to them the pre-generated static HTML. Even if you serve JavaScript generated content to real users.
This is no longer an important issue for newer JavaScript React/Angular, thanks to server-side tech like NextJS. If you can pre-generate pages for both Google and real users, definitely just do that. For many sites however, this is worth reading and understanding!
Read:
Content cloaking? (scroll down or search Cmd+F for "cloaking")
https://www.seoclarity.net/blog/dynamic-rendering-and-seo
Guides by Google:
https://developers.google.com/search/docs/guides/dynamic-rendering
https://developers.google.com/search/mobile-sites/mobile-seo/dynamic-serving
Because:
Search engines assign each site a "crawl budget".
https://www.seoclarity.net/pillar/crawl-budget