Server-Side rendering for dummies and beginners?

I really wasn’t able to grasp the Server-Side rendering concept and was looking for a Dumbed down explanation for it.

Any help would be appreciated.

So complete HTML pages that are sent by a server will render faster than an empty HTML page + a big blob of JavaScript that builds the HTML once the empty page has loaded.

Because frameworks like React exist to render HTML, generally you can tell them, instead of attaching it to a DOM element, just spit out a string that represents all the HTML.

So if you have an app on a server, you could execute that, render to a string first, and save that to index.html on the server, then serve that file to users. So users see exactly the same thing, just the initial page load is, in theory, much quicker, because it’s just HTML. The app’s JS still gets sent, but execution can be delayed because all the stuff needed at first is already in front of the user.

There are subtleties to this, and it tends to add a lot of complexity (sometimes for no real benefit), but in certain circumstances it can drastically speed up apps.

Each of the major front-end frameworks has a “sub”-framework to help with server-side rendering too: