Should I have my server return JSON data and then have the JavaScript parse it to create / render HTML directly or should I have my server-side code return HTML directly, which can be directly placed by the JavaScript.

Thoughts?

Should I have my server return JSON data and then have the JavaScript parse it to create / render HTML directly or should I have my server-side code return HTML directly, which can be directly placed by the JavaScript.

Thoughts?

• php
• javascript
• ajax

• 1 I think we'll be able to help you e to a better conclusion if you supplied some metrics and perhaps an example of the data being returned/rendered. – Tr1stan Commented May 5, 2011 at 13:37

8 Answers 8

Render the code server side (e.g. as it is done in Rails' AJAX), then return the view to the client where it will just be placed.
Then profile your code. If it turns out to be too slow, return the JSON and think of a way to render it client-side.

Your priority for this should be to not make the whole thing too copmlicated.

I'm not a fan of returning generated HTML. IMHO I'd return JSON and use something like JQOTE 2 to handle the rendering. Let the clients resources handle that work.

(Side note: JQOTE is an amazing tool!)

I think that if you won't need the data later, e.g. for filtration, on-the-fly search, etc, then you should return HTML.

Premature optimization is the root of all evil. Start with whatever is easier. If it's just too slow, find a way to optimize (perhaps by using an alternative).

If one is not easier than the other to you, go with the server side. I can't imagine a circumstance where a server side scripting language operation would be slower than javascript in a browser.

If all you have to do is render HTML, then it's probably much easier to do it directly with the server (php). Otherwise, you have to convert it to JSON with php first, then convert it back with JS later. That's at least one extra step and extra work for the javascript side.

I'll vote for your first proposed approach.

JSON serialized data size is smaller than (X)HTML one and your first approach saves a lot of CPU cicles, network traffic, memory and speeds-up your client, which ends in a responsive user interface.

Just send data in JSON format and parse it in JavaScript in the client-side so things will be more simpler in the server and rendering things will be delegated to client web browser.

There is no one right answer; it depends on your expectations.

If you want the application to be accessible (ie. processed by a screen reader), picked up by search engine bots or want the UI to be cacheable between requests and users, you will have to use server generated HTML and no dynamic loading. If you use a cache for the generated HTML, you get a lot of mileage without the constant re-rendering. There are more server side tools than client side but that is being less of a true statement as JS grows.

OTOH, producing JSON that is rendered by the client using some JS library can really help your server reduce load. You're distributing the work of rendering to the client but that does take control out of your hands. If you have a JS heavy solution and the client can't process JS (screen readers, search engine bots, etc), then the site should degrade gracefully or expect to have some audience that can't view it. That audience might be minuscule for you but it's something to know. As long as you manage the rendering well, (set min size for areas, wait icons, etc) then you can have client side rendering that is as smooth as server side (when paring visual rendering steps). Producing JSOn also gives you more flexibility as more interfaces are defined or other non-UI clients bee important.

It depends on what you are trying to achieve. If you are writing a mobile application you may want to save bandwidth and work with client-side templates (just as an example: John Resig's micro templates). If bandwith is not that important to you I would just use server-side templates to generate the HTML you need.

In my opinion it's all about responsiveness. Your server is ALWAYS going to be able to process data faster than the UA, however the difference between the two may be negligible. If that's the case, then I'd remend passing JSON to the UA and then use client-side code to do the dirty work. That way, you'll have clear separation of concerns between the server and the client, allowing you to deliver JSON data to different client endpoints in the future without having to modify your server-side code.

However, if there is a significant performance hit with doing the data processing on the client side then it might make more sense to deliver HTML directly to the client. HOWEVER I highly remend that you still deliver JSON, only to your server-side HTML creation function (rather than the UA) so that you can still deliver JSON data to multiple endpoints without having to alter core code in the future.