I'm studying ways to develop a SEO-friendly React website with CSR. I have read many articles pointing out that to provide a SEO-friendly website, one should go with the SSR approach.
To my knowledge, when using browser's view source feature in CSR, the html content is a bunch of javascript bundle files and the actual html would not be present since view source only shows what's rendered from server side. while in SSR html is rendered and passed to the browser and the displayed html would be present in source view of the page.
However https://divar.ir (a well known retailer site) seems to be using CSR (upon clicking any link, the data is fetched from an api endpoint in json format via an ajax call and then it looks like the page is rendered in client side).
The thing is, when I view the source of the page even after clicking any link, I can see the actual html that is being displayed.
So to sum it up, How can I use CSR in React, and when I view the source of a page, I actually see the html that is being displayed to the user?
Server side rendered react applications usually only pre-render the initial page load. Subsequent navigation may still be entirely handled and rendered by the client.
By using the view source tool it will open the code in a new tab (at least in chrome) that leads to a fresh load of the current route from the server. If the application is server side rendered you will receive a pre-rendered version of that route and therefore see the html for that route.
By providing a sitemap of your website a bot can discover all SEO relevant routes by visiting the urls provided in the sitemap. Each of those requests are independent requests to the server and will be pre-rendered in contrast to how a real user would navigate the page by clicking the links.