Client side vs. server side

Imagine we are building a web application for our secretary. She would like to manage the personnel list of our company.

We can show the personnel list in 2 very different ways. These 2 ways are:

• We render everything on the server and we insert JavaScript calls through elements onclick event handlers.
• We render everything in the browser (using JavaScript).

There's also a hybrid, but for the sake of clarity I will keep things black and white.

Rendering everything on the server

I think this is the most widely used technique today. The personnel table will be rendered something like this (depending on what language you are programming in):

<table id="persons">
#for $person in $all_persons
<tr>
  <td>$person.name</td>
  <td><a href="#" onclick="deletePerson(this, $person.id)">Delete</a></td>
</tr>
#end for
</table>

Rendering everything in JavaScript

Another technique is to create an unchangeable skeleton, this skeleton is then filled from JavaScript.

The skeleton is pretty trivial in our example:

<table id="persons"></table>

In our JavaScript we will have following function that takes a persons information as a JSON object and inserts it into the table:

function insertPerson(person_json) {
  var persons_table = AJS.$('persons');
  var link = AJS.A({href: '#'}, 'Delete');
  AJS.AEV(link, 'click', deletePerson(link, person_json.id));
  var row = AJS.TR(
    AJS.TD(person_json.id),
    AJS.TD(link));
  AJS.ACN(persons_table, row);
}

The table is populated by following loop:

#for $person in $all_persons
  insertPerson({id: $person.id, name: $person.name});
#end for

The important fact is that the above loop is the only thing that changes when we update something.

Head-to-head

Server side rendering

Advantages:

• Can be partially viewed by old browsers
• Fast for static content
• Easy to code (it's much easier to code HTML in HTML than in JavaScript)

Disadvantages:

• Server does the rendering, i.e. high CPU cost
• Bandwidth costs are high because rendered HTML is sent back

Client side rendering

Advantages:

• Bandwidth costs are saved, because the skeleton isn't heavy
• CPU cycles are also saved, because the client does all the rendering

Disadvantages:

• Harder to code
• Harder to support multiple/older browsers

What to use where?

There isn't a golden path, and generally one should mix the two methods. But let's just take it black and white.

Blog

I would mainly use server side rendering for a blog. Why? Because it's not that dynamic. You can have thousands of visitors, but they will mainly see the same thing. With a little caching you'll only re-render when some content changes. Of course, one can still sprinkle Ajax around.

GMail

GMail is a system where every user has access to unique data, i.e. it's a very dynamic environment. This is where the client side approach comes handy! Basically, every user uses the same skeleton and the same JavaScript. The whole interface is the built from JavaScript.

Using client side rendering approach one can save A LOT of bandwidth and CPU cycles for an dynamic application.

By sniffing around GMail it looks like they are actually using the client side approach!