Tuesday, November 13, 2018

Client Side Rendering vs Server Side Rendering

Client Side Rendering
Client code drives everything from reacting to user input, querying the server for data using APIs which in most cases would return JSON, presenting the resulting data back to the user. Backbone, Angular, Ember etc would be good illustration of this strategy.
Advantages of client side rendering
  1. High Re-usability – The back-end code only needs to spit out JSONs. There could be n number of clients for the same service who would be consuming these JSONs on the webapp level as well as mobile.
  2. Front end can be tested in isolation from the back end.
  3. The front end is totally independent of the back end and the back end can be swapped out to a different language. 
  4. Saving power on the server –  processing are pushed to the client machine than the server.
Server Side Rendering
The server decides what the client should render. The pieces of HTML returned by the server may contain complex client-side behavior, which may include client-side HTML generation. This behavior however would be limited and might not suit well for all the desktop like client applications and front ends.
The advantages are as follows
  1. Code is type-safe, cleaner and easier to debug.
  2. There are set standards for writing server side code. With the advent of frameworks in JavaScript there are very well defined standards in JavaScript world as well.
  3. It is faster to generate and send back HTML from server. Twitter moved from server to client only rendering and them moved back to server side rendering only to realize load time gain of 400% across different browsers.
  4. Server side rendering requires a constant time over load but client side rendering defines a linear increase with load.
  5. Content is visible to search engines for better indexing.
  6. There is less data going down the pipe.
It is a bad practice to send JSON if all that we are doing on the front end is to incorporate that JSON in page’s DOM structure. Also it is a bad practice to send HTML to the client side when the client would need to parse the HTML and do some calculations with that.
Hybrid is the best strategy?
Instead of delivering JSON data and baking them into the template on client side, you could render the template on server side. Once the page is loaded, next the smaller interactions come into play, thus AJAX call has to append html templates to the DOM instead of processing JSON data.