Server side rendering vs Client side rendering

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).

For more information refer to docs of client side rendering using Metamug API Console