1

I have been working on a project, where I'm making AJAX call to load 100's of record from database, which would then be rendered on a slider.

To be precise, the data I would be fetching is the 'Image Path' for all the images, and other details such as 'the size of slider thumbnail', 'number of thumbnails to show', etc.

For this list of data, I have 2 options: 1. To generate the HTML on the server-side and send it to client, where it will be applied to the slider. 2. To generate and send json data to client. Parsing this json data and generating the Slides for the Slider.

I'm confused as to which approach to use, for better overall performance for client/server. Google search and reading articles states me that using json data is a faster. However, after performing few initial test to fetch and render HTML shows that generating HTML on server side and sending it to client for rendering is much faster than sending the json data to the client and preparing the HTML for rendering.

It would be great if someone would put a light on this issue, where the server gets about 4k-5k hits per hour.

Ajit Kumar Singh
  • 357
  • 2
  • 11
  • I think json is more lightweight than sending the rendered html data. So I would go for option 2. – The_ehT Aug 01 '16 at 06:59
  • Send `html` from server, which would use one request and response; and according to your tests, would be faster. – guest271314 Aug 01 '16 at 07:35
  • Since I'm using php, i will have to get data into array, and then parsing them before sending them to the client. Then I will have to do json.parse, and make loops to generate them. On other hand, If i just generate the HTML on server side, I'm saving the parsing time. That's why i think, that HTML data from server is getting rendered faster compared to json. – Ajit Kumar Singh Aug 01 '16 at 09:55

2 Answers2

1

There's a lot of really great discussion around this topic, however I tend to side with client side rendering. My reasoning is 1. If your server is getting hit very often, server side rendering slows down the response time of your server and can cause really long queue times, and 2. Because you're making the request separately from your markup and styling, you can have a splash page or some waiting animation on the user side as opposed to having them sit at a white screen while your server is compiling everything. This is just my opinion, but I've found client side rendering to provide the best UX as well as offloading computations from your web server is often a good idea

Jay
  • 998
  • 1
  • 10
  • 22
  • My only concern is what will happen in the client browser is slow. In such case, m sure that sending HTML from server would would be a better choice. – Ajit Kumar Singh Aug 01 '16 at 09:51
  • While it would technically be better, I'm sure that the user of this computer is very used to websites loading slowly, and in general even if you send HTML it's not guaranteed that the page would load quickly. IMO it's better to optimize for the average users, instead of trying to appeal to the 1% edge cases (in both directions). Not to mention that if the client browser is that slow then they'd probably be using a relic like IE7 or something of the sort, which would be a whole 'nother batch of problems that are completely unrelated – Jay Aug 01 '16 at 14:25
0

I like the answer on this link. A Short Description what it is about (Copy-Paste):

I'm a bit on both sides, actually :

  • When what I need on the javascript side is data, I use JSON
  • When what I need on the javascript side is presentation on which I will not do any calculation, I generally use HTML

The main advantage of using HTML is when you want to replace a full portion of your page with what comes back from the Ajax request :

  • Re-building a portion of page in JS is (quite) hard

  • You probably already have some templating engine on the server side, that was used to generate the page in the first place... Why not reuse it ?

I generally don't really take into consideration the "performance" side of things, at least on the server :

  • On the server, generating a portion of HTML or some JSON won't probably make that much of a difference

  • About the size of the stuff that goes through the network : well, you probably don't use hundreds of KB of data/html... Using gzip on whatever you are transferring is what's going to make the biggest difference (not choosing between HTML and JSON)

  • One thing that could be taken into consideration, though, is what resources you'll need on the client to recreate the HTML (or the DOM structure) from the JSON data... compare that to pushing a portion of HTML into the page ;-)

Community
  • 1
  • 1
Ajit Kumar Singh
  • 357
  • 2
  • 11