Server-side rendering – server generates a view and delivers it to the client. This was the norm back in the day. With this solution: you build a web page, the server compiles everything, including the data and delivers a fully populated HTML page to the client. Basically, the client does nothing while the servers serves up everything (kind of selfish if you ask me). Now as a selfish user, you’re probably thinking “Hey that sounds great!”, but there’s more to the story. You see, every time you navigate to another part of the same page (let’s say you go from the Home page to the About page) it has to do the same work all over again ( fetch the data, fill it in, do all the rendering and processing and ship-out the HTML to the client).
Client-side rendering – a request is redirected to a single HTML file and the server will deliver it without any content until YOU fetch all the JavaScript and let the browser compile everything before rendering the content. This is mostly the norm nowadays, single-page applications and frameworks like React, Angular and Vue.js use this principle and it obviously works pretty well. This is basically the server giving you an IKEA chair to put together.
I wrote this short explanation so I can share it with my university friends and help them understand the concepts a little bit better. This is definitely not the whole story and you should read up more about SSR vs CSR.
I recommend the following sources if you want to learn more:
What's SSR and do I need it?
What exactly is CSR and how it's different from SSR?
SSR vs CSR