Server-side vs. Client-side (AJAX) Loading

Question

I was wondering what is considered best practice. Let's say I have a dropdown select widget. Should it be preloaded with content when the page is served up from the server or once it is loaded, should an AJAX request be made to retrieve the contents and then populate it?

I kinda like the idea of loading it empty and issuing an AJAX call to retrieve the contents. But is that going to result in slower page loading times. Especially if the page has several widgets that need to be loaded with content from the server?

Does it matter on the amount of content being loaded?

For the dropdown example, I meant the options in the dropdown. So if I had a dropdown of employees to choose, from I am referring to that list of employees. Do I load an empty dropdown and on init of the controller have it retrieve the employees and populate the dropdown?

But then I think about a datagrid of let's say 200 rows of emplyees and some employee data that is stored in a database. Do I load the page and when the page loads have a controller whose init function retrieves the dataset of employees and populates and displays the datagrid?

Or when the page is served up from the server does it retrieve the dataset on the server-side where it also creates the datagrid and it gets loaded then. This is the programming world that I am used to having done mostly PHP, JSP and ASP stuff in the past. Only using JavaScript for some cool page effects, etc.

But I seem to like the idea of once the page is loaded (or being loaded), make AJAX requests to retrieve the data needed to populate the widgets/content on the current screen. I am just concerned that the loading of page might seem clunky or slow since I am now making more requests to the server to paint the page. The initial request for the page, and then a request for each dataset needed to populate a widget.

Answer 1

As you point out yourself, loading everything with AJAX is going to make the page slow. In fact, one of the best practices for speeding up web pages is to reduce the number of http requests.

That being said, there are some cases where AJAX makes the page load faster. One example is auto complete for a text box. If implemented such a feature without using AJAX that would require the web page to load every single possible query in the first load. The page would take forever to load all that data. But the auto complete would probably seem more response than normal once the page had loaded.

My advice is to start out with the most simple solution you can think of, and then add AJAX, cache and other optimizing features where needed afterwords.

Answer 2

It depends of the data you are displaying, if you want quick updates from the database the ajax approach is fine. But if your data is fixed (or you don't care about updating it once the page is loaded) then I shouldn't go with the ajax approach, is more work (requesting json, parsing it, populating the select or whatever) and you don't gain much benefit.

Answer 3

I think the best answer is "it depends on your framework". I've seen web frameworks that handle this problem both ways. I do think that, especially when a lot of data is being populated into the DOM, it's preferable from a performance perspective to load as much of the page as possible in the initial HTTP response, and only update as needed via AJAX. Note that for large data sets, the performance overhead of an additional HTTP request is relatively small compared to the impact of performing substantial DOM manipulation via JavaScript -- DOM manipulation can be extremely slow in some browsers.

You might get more detailed answers if you add which framework(s) you're using.