title: Heavy use of ajax question - how to render html on a page initially and afterwards as it is modified?
body: <p>I'm sure this is a common problem for many web applications these days. What is the best way to reuse html templates so that you're not doubling up when you initially render the page and when new things are added to that page?</p>
  
  <ol>
  <li><p>I could render the HTML page like normal, but not populate any of the data specifically. Then, each section of the page would be responsible for rendering itself using Javascript. The good thing about this method is that javascript is used to render all of the content that is updatable.  There's also a really nice separation of concerns here, where each section on a page does it's own thing.</p>
  
  <p>The drawback is that I am making multiple requests to the server per page as it loads up.</p></li>
  <li><p>I could send HTML fragments generated by the server and just prepend/append them to whatever part of the page. This makes the initial loading of the page very fast. It also reuses the same server-side template code, so there is also no duplication. </p>
  
  <p>The drawback is that I can't inspect it further. The other drawback is that prepend/append is pretty limited. What if I want to maintain how it is sorted? If it's alphabetical, the user will have to refresh the screen anyway to get the proper sort order. If the results are paged, this is even more troublesome to do.</p></li>
  <li><p>I could send a JSON data structure, just as in 1 - however, I could also add the fully generated html template. This would give me the power to inspect the object first before deciding how to prepend/append it to the page.</p>
  
  <p>The only real drawback here is that I would have to call into Freemarker manually in my controllers (I am using Spring 3.0.x MVC). This is typically done for me automatically. I am sure there's a way to do this, but I'd have to spend some time investigating how.</p>
  
  <p>Effectively, this gives me all the benefits of 1 and 2, but it is also the most complex solution. The data transferred is also higher than the other two solutions... but perhaps that can't be helped.</p></li>
  </ol>
  
  <p>Which way is considered best? Any other approaches? The app I am building is really complex, and is going to use A LOT of ajax. The equivalent HTML-only version is just not possible. In fact, I'm not even going to build the app so that non-Javascript users can use it. Oh well. So keep that in mind when you answer ;)</p>
  
  <p>Thanks</p>