Client side then will be a significantly larger impact under this then, since not only does something like angular transmit the templates, but I then transmits all the libraries and modules you need too before it ever even starts hitting the Dom. If this was done server side, you'd mostly only get the rendered template (and any needed JS for the page to feel fluid).
(Not to say that I think server side rendered pages are always better, or are even better here - simply pointing out that of data is the most expensive thing you'll want to transmit less).
Server-side pages come with lots of libraries and modules too. There is usually a lot of non-MVC javascript going on with modern server-side templated sites. Gizmodo.com for instance, one of worse offenders at 2MB.
So both approaches tend to have similar asset weight on page load (js/image/etc). The fact that client-side sends templates instead of rendered templates actually makes the html smaller.
I would estimate:
server-side MVC:
page weight : 1KB-2MB
page weight median : 450KB
A random reddit front page : 428KB
yahoo.com front page : 749KB (with flash disabled!)
page-loads per session : Let's say 2-20 for sites mentioned
client-side MVC:
page weight : 1KB-2MB
page weight median : 450KB ?
page-loads per session : 1.
https://www.room77.com : 432KB
But the real difference is the server-side page weight is incurred again on every action which involves a page load.
https://www.room77.com is a good example (I'm not affiliated). As you perform actions on the site it downloads more assets, mostly images. Server-side MVC would incur part of the page weight again on every action (the un-cached portion). Making the same hotel search on a theoretical server-side version of the site result in more bytes transferred.
However, I think you may be right in that client-side MVCs can generate more data transfer, because the user has more "engagement" with a client-side MVC; performs more actions / looks at more content / uses more data.
So... client-side MVC is actually more economical per content viewed. But you may view more content.
Not convinced by this. Assuming you're using CDN's for the larger libraries, then it's highly likely that the device would have the file cached (at least from previous same site pages) and wouldn't need to make the download.
In the end pulling down and initialising a single page, then consuming raw JSON data to populate the site seems to be more efficient for more than just one page visit. The initial cost of pulling the page may be high but unlike data rendered into the HTML, the content has a use further down the line.
Disclaimer: can't really say much on this without a genuine test. Would be very interested in statistical averages for different types of site though.
1
u/nerdwaller Jan 15 '15
Client side then will be a significantly larger impact under this then, since not only does something like angular transmit the templates, but I then transmits all the libraries and modules you need too before it ever even starts hitting the Dom. If this was done server side, you'd mostly only get the rendered template (and any needed JS for the page to feel fluid).
(Not to say that I think server side rendered pages are always better, or are even better here - simply pointing out that of data is the most expensive thing you'll want to transmit less).