This blog post is 7 years old! Most likely, its content is outdated. Especially if it's technical.
Last year I put together a little experiment called AJAX or Not? and blogged about it here. The basic idea was to display 1,000 rows in a table. There are several ways of doing it but I decided to compare the following three patterns:
- Rendering the whole table in Django server-side and return the whole HTML document.
- Rendering a skeleton page, then load the table content as a big chunk of HTML via AJAX.
- Rendering a skeleton page, and let AngularJS load all the content of the table from the server as JSON and let AngularJS render it into the DOM.
It was clear as day that the server-side rendering version was hands down the fastest. And the AngularJS rendering the slowest.
Note! AngularJS is amazing and super flexible and powerful because you don't really need to worry about how to re-render once the data changes. This is really useful when you do things like loading more data from a remote endpoint or doing some in-page filtering.
Enter ReactJS
The point of AJAX or Not was not to compare Javascript frameworks but I had some time and I thought I'd write an equivalent version of the AngularJS one with ReactJS (version 0.13.3).
Anyway, here's the code and it's using the GitHub fetch polyfill to do the AJAX query. The AngularJS code is here and here and as you can see it's using track by
on the ng-repeat
.

To measure the difference I ran a comparison in WebPageTest which I encourage you open and study for a bit. You can watch the video and download the video here.
Also, note that the Django rendered version loads jQuery. That's because the functionality dictates that clicking on a link should show a confirmation box before going to the link. I know, it's silly but it's very realistic that every page needs some Javascript functionality.
Executive summary...
- Django server-side takes 0.8 seconds, ReactJS version takes 2.0 seconds and the AngularJS version takes 2.9 seconds.
- The ReactJS version is the fastest to display something. It displays the header and the image first. Only by 0.2 seconds before the Django server-side version.
- The AngularJS version causes a lot more CPU utilization. This might really matter when you're on a low-end smartphone.
- The ReactJS causes twice as much CPU utilization than the server-side version. The AngularJS causes twice as much CPU utilization than the ReactJS version.
- AngularJS is slightly larger than ReactJS + fetch but I don't think this has a huge effect on the total load time.
Some other thoughts...
- The ReactJS code is all in one place more or less. That's neat! But it's pretty darn big in terms of number of lines. AngularJS code is split half in the Javascript code and half in the HTML.
- It's clear, if you want a fast loading page, avoid Javascript as much as you possibly can.
- This experiment is very optimized in how it gets the data to be displayed. In fact, the server-side rendering time is close to 0 seconds because the whole HTML blob is stored in
memcached
. A more realistic thing is that extracting the data would take a lot longer if the query isn't so easy to cache. That would be a huge disadvantage for the fully server-side rendered version since if the data query takes a long time you'll sit and stare at a white screen longer. Doing the AJAX approach would definitely be a nicer experience.
- The difference isn't that big. Both fancy Javascript frameworks have amazing features that leave jQuery in the dust but if you want your page to load crazy-fast, do as much server-side as you possibly can.

- Previous:
- Premailer.io 8 July 2015
- Next:
- How to log ALL PostgreSQL SQL happening 20 July 2015
- Related by category:
- How to "onchange" in ReactJS 21 October 2015 JavaScript
- To then() or to success() in AngularJS 27 November 2014 AngularJS, JavaScript
- Fastest way to find out if a file exists in S3 (with boto3) 16 June 2017 Web development
- How to throttle AND debounce an autocomplete input in React 1 March 2018 JavaScript, Web development
- How to create-react-app with Docker 17 November 2017 JavaScript, Web development
- Related by keyword:
- How to "onchange" in ReactJS 21 October 2015
- How to create-react-app with Docker 17 November 2017
- A darn good search filter function in JavaScript 12 September 2018
- How to deploy a create-react-app 4 November 2016
- To CDN assets or just HTTP/2 17 May 2018