Friday, June 18, 2010

Importance of server-side rendering for web UI controls

As we move in to the Age of jQuery, where web developers are finally embracing and using JavaScript for all variety of cool thing, there are some important “gotchas” that tend to get overlooked. One of the most critical is the importance of supporting server-side rendering.

Most of us don’t worry about browsers not supporting JavaScript these days because, frankly, every browser does! Even mobile browsers (that matter) support and execute JavaScript. And despite what you may have heard, JavaScript can be used in accessible applications (a requirement for most government websites) as long as certain “precautions” are taken. Unfortunately, there is still a MAJOR consumer of the web that cannot deal with most JavaScript! Know who?

Search engine crawlers.

If you want your content to be indexed (by public crawlers OR your own internal corporate crawlers), pure client-side initialization and rendering is a problem. Search crawlers do not execute JavaScript. Some research suggests that modern crawlers are starting to use “tricks” to follow links embedded in JavaScript, but most SEO experts agree that the crawlers are not doing any arbitrary JavaScript execution on your page. (Even Google continues to advise developers to use a text-only browser like Lynx to see a page as web crawlers see it.)

google-ajax-caching Telerik Grid for ASP.NET MVC in “client-binding mode” as seen by Google’s cache

So what? Why is this subject for Telerik Watch?

As web developers, we want to ensure that we deliver highly-optimized, high-performance web applications, but we also want to make sure our content is indexable. When you pick UI components, it’s important to pick tools that support BOTH server-side rendering AND client-side rendering.

For most “normal” users, the client-side rendering will enable you to deliver a premium, high-performance experience. If your control is really well built, the client-side mode will only send data between the browser and server and will handle HTML in the browser (minimizing bandwidth, maximizing responsiveness).

For search crawlers, the server-side rendering mode will enable you to present all content on the initial request. HTML is rendered on the server, sent the browser, and then easily indexable by the search crawler.

google-server-index Telerik Grid for ASP.NET MVC in “server mode” indexed correctly by Google

Telerik is one of the only UI component vendors that offers this type of “dual mode” support for both ASP.NET AJAX and ASP.NET MVC. Many UI component vendors offer all or nothing- client-side or bust- so beware! Not all tools are created equal, and you might miss this all important feature in your initial review.

Recap: Client-side rendering is great for performance, but terrible for search indexing. Make sure you pick UI components that provide flexible support for both rendering modes so you can have your cake and eat it too.