Client Side Rendering vs Server Side Rendering

Lately I've decided to keep mental notes of everyday concepts I use in my work. Most times I have a good overview of what a concept does but I never really understood what goes on under the hood. I mean, it works innit. But I'm taking a step further with some of those concepts, and today's subject is all about Client Side Rendering(CSR) and Server Side Rendering(SSR). Before SSR was a thing We all know how wonderful Single Page Applications(SPAs) are, but to really appreciate SSR, we need to go back a little. So basically, the traditional way of displaying content on the internet is this little relationship that happens between the client, which is your browser and the server, whatever web hosting platform your content lives on. The browser asks the server for a page, the server returns an index.html with a <script> tag at the bottom pointing to a main.js file, the browser then makes another request to fetch that main.js and executes it. <!-- index.html --> <div id="root"></div> <scrip