Building an AJAX Application: Design pattern and strategy - Client Side Include

Introduction

  There are many static areas in dynamic published pages. These static areas (for example, they are called
  "tiles" in Struts) appear as headers, nevigation and footers. The same static areas are combined with dynamic
  data into pages in server side and published back to browsers, If you take a look at major pages on most popular 
  commercial web site such as ebay.com and amazon.com, you will see these static areas sometimes 
  occupy more than 50% of a page Show details.
        
        
       
 All the areas within red rectangles are static:
        
  
        
  
      
  This means that we are redundently sending a big amount of static content back to browsers.  The only understandable
  reason, I can see, is that we need to send a complete page back so we can just send back the dynamic part.
  
  
Solution
  
  The strategy of "Client Side Include" is to separate static content from dynamic content and have 
  browsers cache the static content as static html files while still dynamically publish the entire page.
  The trick is let the dynamic page like jsp return to browsers and then have Remote Script fetch the
  static content as static html files. In this way, browser will first check to see if these static html files
  are avaialble in their cache. The fact is yes so browser never ask server to resend them.
  
 
Demo
   The "Related issues/sites" area at bottom of this page (below the herozontal bar) is a Client Side Include. 
   See the request summary from HttpWatch Show details.
        
        
       
 All the areas within red rectangles are static:
        
  
        
   Show details
   
  
      
   You can also install HttpWatch and nevigate to this page with your HttpWatch on.
   You can see the file "contact.htm" is always cached. That means that we can reduce 50% of bandwidth and 
   page assembly time at the server if we turn all the areas within red rectangles in the EBay page into 
   Client Side Include.
  
  
Conclusion
     
  For those pages with a lot of static content mixing with dynamic data, this approach could save huge amount of bandwidth 
  and server cup time.
  
  You may also want to see an opposite solution of mine at  

          Building an AJAX Application: Design pattern and strategy - Cached HTML