It started on the server
Before the rise of Single Page Apps (SPAs) and JavaScript technologies, the HTML pages were rendered on the server using technologies like .NET, Java, PHP, Java and developers used JavaScript and AJAX to create a rich UX in the client browser.
Then moved to the client
After that the development focus shifted to client-side rendering which witnessed the rise of frameworks like Ember, Angular 1. The biggest advantage of client-side rendering is its performance. The entire payload including a bunch of static assets like HTML templates, JavaScript files comprising business logic, CSS files, etc. is loaded upfront making it possible to respond instantly to the user's interactions.
Client rendering is costly
But this performance comes at the cost of intial experience when the users just see a "white blank page" with a loading spinner until all the payload has finished loading. But these days, the users expect a lighting fast display of a web page once they visit it.
Another downside with the client-side approach is that it is not SEO friendly because search engines do not execute JavaScript. Using the frameworks like Angular 1 for the client side trouble search engines indexing your pages and making them useless SEO-wise.
Server site rendering to the rescue
In this context, server-side rendering refers to the ability of eliminating the issue of initial load time entirely, without sacrificing any of the benefits of client-side JavaScript. New frameworks like React and Angular 2 help you achieve this. Also, your page content is now visible to search engines.
If you are a Node developer, you can do the server-side rendering by running an instance of your app in Node on the server. Now when a user sends a request, you already have the app available in memory.
From the React JS website:
"The server-side rendering allows you to pre-render the initial state
of your React components server-side. This speeds up initial page
loads as users do not need to wait for all the JavaScript to load
before seeing the web page."
From the redux.org website: The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests our app. When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties.
Universal JavaScript
The term Universal refers to the ability to run a particular piece of JavaScript code on both client and server. It is sometimes referred to as Isomorphism.
