Client side includes vs server side includes?

Question

We have an HTML page with multiple div blocks. We want to separate these div's into multiple files and then combine them all together into a single file - is it best to use server side includes (JSP in our case) or client side includes?

Note that we're using JQuery - not sure if JQuery has a clever way to do the includes.

Answer 1

In terms of performance it is vastly superior to do this kind of processing on the server. The costs in terms of I/O and processing for additional HTTP requests -- as would be necessary if you were doing the collation on the client -- would be significant. Including additional content on the server will result in milliseconds of delay for the user; doing it on the client will take orders of magnitude more.

Edit Per Luke Schafer's comment, this presumes that the content being put together can be instantly generated (e.g. by including flat files from the server). If it takes time (e.g. lengthy database calls) it might be appropriate to load the main part of the page and add extra content in with jQuery. The best solution, as ever, depends on your particular circumstances.

Answer 2

Actually, client-side includes have one property that is very useful: client browsers have caches! If some of your content is not expected to change often, and each client is expected to load some fragment of the page often, client-side includes are a good idea because the client's browser cache can be leveraged.

The idea is that your full page contains a bunch of placeholder divs where the client-side includes will be dropped. The HTML fragments are loaded through AJAX calls. If the HTTP response headers of the fragments specify an Expires and/or Cache-Control far into the future, when your client visits the next page the AJAX request will be served from cache instead actually going to the server.

Answer 3

I have to agree with everyone else that the serverside is the place, with a caveat.

If your sections contain something that takes a while to load, say, each one has content from a separate web service call, it might be beneficial to let JQuery load them for you with a get, as the rest of the page can be loaded while the sections are loaded asynchronously.

Other than that, yeah... server side

Answer 4

I am not exactly sure where I fall on the client side versus server side debate. The popular thing to do these days seems to be to process things on the client side. Probably some combination of the two is best. Just to try it fully client side, I decided to spin up an object that did client side includes asynchronously, but cached the text for later use. There is a load function that takes a callback function as a parameter called on successful loading. There is also a function to set the inner html of an object to the loaded text. The object requires a previous include of jquery.

/**
 * An object to manage client side includes. 
 * 
 * Loads of text are asynchronous but the result will be cached for later use.
 * 
 * @param urlText - the url of the inlcude text
 * @returns an Include object
 */
function Include(urlText)
{
    var self;
    var loaded;
    var txt;
    var url;

    /**
     * Sets the url for the include.
     * 
     * Will unload a previously set include.
     * 
     * @param url
     */
    this.setUrl = setUrl;
    function setUrl(url)
    {
        if (self.url != url)
        {
            unload();
        }
        self.url = url;
    }

    /**
     * 
     * @returns the url
     */
    this.getUrl = getUrl;
    function getUrl()
    {
        return self.url;
    }

    /**
     * Unloads the current url.
     */
    this.unload = unload;
    function unload()
    {
        self.txt = null;
        self.loaded = false;
    }

    /**
     * Loads the current url asynchronously
     * 
     * @param fnPostLoad function to call on successful completion
     */
    this.load = load; 
    function load(fnPostLoad)
    {

        if (self.loaded)
        {
            if (fnPostLoad != null)
            {
                fnPostLoad.call();
            }
            return;
        }

        $.ajax({
            type : "GET",
            dataType : "text",
            url : self.url,
            success : function(data) {
                self.txt = data;
                self.loaded = true;
                if (fnPostLoad != null)
                {
                    fnPostLoad.call();
                }
            },
            error : function(){
                alert("An error occurred accessing client side include located at: " + self.url);
            }
        });         
    };

    /**
     * Sets the inner html of a given object to be the text of this include.
     * 
     * Will load the url if not loaded.
     * 
     * @param obj
     */
    this.setInnerHtmlOf = setInnerHtmlOf;
    function setInnerHtmlOf(obj)
    {
        load(function(){obj.html(self.txt);})
    }

    // initialize members
    self = this; // must be done first
    loaded = false;
    txt = null;
    setUrl(urlText);    
}

To use this object you might do something like this:

var foo = new Include("foo.inc");
var bar = new Include("bar.inc");
foo.setInnerHtmlOf($('#treeMargin'));
bar.setInnerHtmlOf($('#mainMargin'));

I haven't done too much testing, but it seems to work pretty nicely.