Server-Side vs Client-Side Rendering

Two ways of rendering HTML: Client-Side and Server-Side

Client-Side vs Server-Side Rendering

Server-Side Rendering With React, Node And Express

How Basecamp Next got to be so damn fast without using much client-side UI

Tradeoffs in server side and client side rendering


Ajax is ubiquitous. Look around at fackbook, twitter, gmail, outlook web, google maps, google instant search, whichone isn’t utilising Ajax?

What’s Ajax?

AJAX stands for Asynchronous JavaScript and XML. It’s a workaround for web app to communicate with server-side scripts. It can send as well as receive information such as JSON, XML, HTML, and even text files (CSS) and JavaScripts, i.e. JSONP. The most appealing characteristic of AJAX is its “asynchronous” nature, allowing update web page partially upon user events.

The basic idea of Ajax is to use XMLHttpRequest to transfer data asynchronously. Of course, you can also do this in a synchronous way.

The use of Ajax in Web development architecture vs. the traditional method:

When did Ajax come out?

In 2005, Jesse James Garrett coined this term in the article Ajax: A New Approach to Web Applications. The technique came out for many years as a way to avoid reloading the whole web page for better user experience.

How Ajax works?

Ajax uses XMLHttpRequest API. A simple Ajax code is in MDN: Ajax Getting Started. Basically, you create a HTTP request using GET or POST method in JavaScript, not through browser tab URL change of the client side, and with a server side code to match such request to response.


Since Ajax is requesting resources in browser, there is a Same Origin policy. Most browsers can’t  allow one domain to request data from other domains except specifically allowed (CORS), but JavaScript is a exception. So developers come up with JSONP to overcome this problem. JSONP returns data in a script manner to be executed immediately in browser through a callback function upon loaded. However, this will introduce security issues like Cross site request forgery as the attacker could use the fake web page to request data from the actual web page.

Browsers are implemented differently, and hence the support of XMLHttpRequest is not fully done. There are many libraries to help in writing Ajax such as jQuery, backbone, YUI,  or other big web frameworks like Angular, Dojo. Essentially, they try to detect the client browser and adopt the different underlining implementation of the XMLHttpRequest API.