Server side rendering vs Client side

LinkedIn Tweet Facebook
Server side rendering vs Client side
Points Client Side Rendering Server Side Rendering
Page reload Yes No
DOM operations Yes No
Rendering Slower Faster
Lines of code More Less
Client side dependency Yes No
Technology Javascript PHP, JSP, ASP etc.
Examples Match Scores, Tickers Blogs, news, listings, master-detail screens
Frameworks React, Angular, Vuejs etc. CodeIgniter, JSF etc.

What is better?

Short Answer Depends on what your requirement is.

Long Answer

For a page that updates frequently like a stock market ticker, match score etc, client-side rendering is the preferred methods.

To display details about a product, blogs, news, listing of products. Server-side rendering is a better technique.

So a single application can use both techniques on separate pages.

Client side rendering (Ajax)

The structure is displayed before data is visible. For example,

  1. The table, rendered in DOM, is displayed when the page gets loaded.
  2. Using Ajax, data comes from the server in the form of JSON and then the data gets attached to the table using getElementByID
var el = document.getElementById();

Example for JSON

{
    "id": 1,
    "name": "A green door",
    "price": 12.50,
    "tags": ["home", "green"]
}

The advantage of using Ajax is with javascript you can select that section and display data without refreshing the whole page. Thus it saves your time and data as well, and the server load.

For example, Datatables library can render data using ajax. This is best suited for applications that require a frequent update.

And you will place this data on the page using ajax.

$.ajax({
    url: ...
})

OR

var xhr = new XMLHttpRequest()
xhr.open(...)
//...
Can you send HTML in ajax?

I have seen stackoverflow sending its answers in form of html in the ajax response. So they can be directly attached to the DOM. But this tightly couples the data with UI. This is also part of the client side rendering. Structural changes to the html needs to be done from the server.

Server-side rendering

Server-Side rendering can handle the structure as well as the data. The most common example is PHP. It handles the design as well as the data. The template and the data are bind together on the server and served as HTML.

<div><?= $myData ?></div>

When the user asks for a page, php will display the data as well as the structure of it. This is the old method used since the advent of the internet. Other technologies like ASP & JSP work in the similar manner.

No Ajax

The user doesn't see half the page or empty sections. In case of ajax based pages, the user waits for a second or two to see the data.

Advantages of this methodsod is that the reload takes care of everything

So there is no inconsistency in the data. Solo developers can write the whole application working only on the server side. Lines of code is reduced. This is due to the fact there is no api created for production (server side) and consumption (client-side ajax).