Question

Recently, I have come up with some idea about how to improve the overall performance for
a web application in that instead of generating a ready-to-show html page from the web server, why not let it be fully generated in the client side.
Doing it this way, only pure data (in my case is data in JSON format) needs to be sent to the browser.
This will offload the work of html generation from the server to the client’s browser and
reduce the size of the response packet sent back to users.

After some research, I have found that this framework (http://beebole-apps.com/pure/)
does the same thing as mine.

What I want to know is the pros and cons of doing it this way.
It is surely faster and better for web servers and with modern browser, Javascript code can run fast so page generation can be done fast.

What should be a downside for this method is probably for SEO.
I am not sure if search engines like Google will appropriately index my website.
Could you tell me what the downside for this method is?

Ps: I also attached sample code to help describe the method as follows:

In the head, simple javascript code will be written like this:

<script type='javascript' src='html_generator.js'/>
<script>
   function onPageLoad(){
      htmlGenerate($('#data').val());
   } 
</script>

In the body, only one element exist, used merely as a data container as follows:

  <input type='hidden' id='data' value='{"a": 1, "b": 2, "c": 3}'/> 

When the browser renders the file, htmlGenerate function which is in html_generator.js will be called and the whole html page will be generated in this function. Note that the html_generator.js file can be large since it contains a lot of html templates but since it can be cached in the browser, it will be downloaded once and only once.

Answer 1

Downsides

• Search Engines will not be able to index your page. If they do, you’re very lucky.
• Users with JavaScript disabled, or on mobile devices, will very likely not be able to use it.
• The speed advantages might turn out to be minimal, especially if the user’s using a slow JavaScript engine like in IE.
• Maintainability: Unless you automate the generation of your javascript, it’s going to be a nightmare!

All in all

This method is not recommended if you’re doing it only for speed increase. However, it is often done in web applications, where users stay on the same page, but then you would probably be better off using one of the existing frameworks for this, such as backbone.js, and make sure it remains crawlable by following Google’s hashbang guidelines or HTML5 PushState (as suggested by @rohk).

If it’s just performance you’re looking for, and your app doesn’t strictly need to work like this, don’t do it. But if you do go this way, then make sure you do it in the standardized way so that it remains fast and indexable.