Explaining Server-Side vs Client Side Rendering AFAIK

As I progress in my career as a full-stask engineer I want to be able to understand the fundementals of all the sides. Whether that is backend, frontend, or devops I want the abilty to know why/how things happen. This helps me learn and enables me to ask better and more informed questions while learning or debugging. This will be brief overview of the two along with some pros / cons and whens / whys.

Server Side Rendering

The web's definition: Server side rendering is a technique used in web development where the server generates the HTML content of a web page before it's sent to the user's browser (Source). My interpretation: Server side rendering is when the server generates the html content of a webpage, so by the time it gets to the rowser it's mostly ready to go. The reason I worded it like that is because it's helpful for me to emphasize in a quick defintion some of the benefits of server side rendering. "So by the time ... it's mostly ready" emphasizes that when the content arrives the browser doesn't have to do much which is one of the benefits of server side rendering. The server handles most of the work, which has a couple different benefits.

One being less work for the browser which can lead to faster load times and another important one is so any data that is needed can be fetched and plastered into the html before it gets to the browser. Knowing that html is generated and then sent the question then raised for me is how are updates handled? The Content is generated and sent with the updated html, but typically uses partial updating that WebSockets or AJAX offers. This allows for the server to send updates to the client without having to reload the entire page. Some disadvantages to this approach are that it can be slower to load the intial page and it may force you to develop less interactively due to the need for events to reach the backend. Some ways to identify if a site is SSR is in the network tab of the dev tools you may see less requests and larger sizes. You may also see the content load all at once and not display the page until it is ready or inspecting the response on a network call you may see the html is fully rendered.

Client Side Rendering

The web's definition: Client side rendering is a the process of rendering web pages on the client(usally browser) using JavaScript (Source). That is a pretty good definition I think so how I like to look at it is the server still retrieves the info but instead of generating the html it sends the instructions for how it should be rendered. The browser then takes those instructions and renders the page.

Some of the drawbacks are that the browser has to do more work, which can lead to slower load times which is often why with CSR you see parts of the page pop in as they are loaded. Another typical drawback to this approach is that the page is not SEO friendly. This is because the search engine crawlers don't run javascript so they can't see the content that is rendered on the client side. However some pluses to this approach are that it can be a smoother experience for the user and potentially more interactive. Some of the ways to Identify if a site is CSR is in the network tab of the dev tools you will see a lot of requests for javascript files. You may also see the content pop in as it loads or inspecting the response of a network call you may see the html is not fully rendered.