Page Rendering: Client Side vs. Server Side

Page Rendering: Client Side vs. Server Side

November 14, 2016

There's an ongoing debate as to whether web pages should be rendered on the client or the server. Advocates of the client side will tell you it reduces server payloads, minimizes requests, and improves user experience. Others disagree, pointing out the issues surrounding SEO and initial page load times seen through a heavy reliance on the client. While both parties bring truth to the table, there exist caveats with both strategies. Be sure to ask yourself the following questions before you decide how you render pages for your web app.

What level of user interaction will you have?

Some web apps, such as content publishing sites, are more geared towards presenting information to the user. While they may have millions of visitors every day, these users are primarily consuming content (reading blogs or other publications).

For these reasons, generating your HTML server side may be a better option. This is largely due to the SEO concerns with client side rendering, as search engine web crawlers still struggle to fully read dynamically generated content. Additionally, content publishers would naturally emphasize strong SEO to attract subscribers. If you are emphasizing strong SEO and content publishing, then use a server side template engine to render your HTML pages.

This is a great option for publishers, however many web apps rely more heavily on user interaction (clicking photos, liking posts, generating content). For these apps, a strong argument can be made for client side rendering, where requests made to the server are significantly reduced. A great example is any single page web app. The idea is that an initial payload is received from the server and used for any user interaction. This is much faster and makes for a seamless user experience, as users don't have to wait for an http request for every button they click, etc. All of the back end data they need is already there, on a 'single page'. While the user may navigate to different links within the site, JavaScript libraries (such as Angular, React, Ember) provide all the routing and template rendering via the browser. Any additional data can be retrieved asynchronously (AJAX) through JSON responses. This greatly alleviates the work load put on the server.

How important are initial load times?

Page load time is critical for retaining users and keeping bounce rates low. Research has shown that page abandonment jumps exponentially just after a few seconds. It is critical that your app loads fast for any new visitors or potential subscribers.

When it comes to fast page loads, server side rendering wins. While client side rendering can reduce the number of requests you're making to the back end, you are relying heavily on the browser to pull in that initial payload and generate all the assets/libraries needed. This issue may not be apparent at first, but as your app grows in complexity, the initial load time will take an increasing hit.

It's also important to remember the amount of faith client side rendering puts on the device itself. When you deliver your HTML server side, you get the server's hardware working for you. When you rely on a client device to render your page, you're at the mercy of the client's processing power. Sure most modern web browsers are sufficient in handling JavaScript rich clients, but mobile devices are significantly less powerful than PCs.

Conclusion

Whether or not to use client side rendering depends largely on what your app emphasizes. If you're trying to build out the next social network, it may be good to explore client rich libraries to minimize requests and provide a seamless user experience. If you're a content publisher and more concerned with users finding and consuming your content, then use server side rendering to minimize initial load times and stay crawler friendly.


Join the conversation...

Posted by Larry P.
May 11, 2017

prerender.io solved all my problems with Angular 1. Although React and Angular 2 allow you to more easily render content on the server side, you won't be out of luck if your using Angular 1 still. you may have to pay a bit to play with prerender.io (if your app scales) but don't let it stop you from using angular 1...
Posted by SpongeBob
April 7, 2017

React makes it so easy to serve your pages server side. I think there really isn't an excuse these days for not doing things server side (especially if you are trying to get found). yes you may sacrifice some performance, but if your app is slow it's not slow because of the js framework you are using. ultimately this article is right but i think the argument for client side rendering is dwindling by the day ...and yes i know they are faster for SPAs...
Posted by beachbumm
March 22, 2017

oh the good old client side vs server side rendering question ...well this article is right in the sense that it really comes down to what you want out of your web app...performance and usability or exposure and 'crawlability'...one of the most ironic trade offs really since one gives you more views/exposure with your audience while the other gives you faster client side performance etc. internal tooling efforts may be good since these are things you wouldn't advertise or try to make money on. online blogs or publications, you really need to use server side rendering to play well in todays SEO world. yeah there are things like prerender.io but thats just one more piece of the puzzle your relying on really...its best just to render things server side if 'being found' is even remotely your concern..
Posted by Jerry S.
March 18, 2017

server side rendering all the way. you may get good responsiveness from a client side SPA, but does it matter if Google can't scrape your site?
Posted by Terry Eisenstat
March 16, 2017

React.js makes server side rendering very simple. You just add a few libraries to your basic Express.js project and you can do all the same client side stuff with React but on the server....rendering things client side makes for a better user experience so it has it's place. just know what you are trying to do. I agree with you that content publishing sites should focus solely on server side rendering...
Posted by Ted Norwich
March 12, 2017

I serve all my pages server side and wouldn't do it any other way. Performance really isn't an issue and it helps tremendously with SEO
Posted by Anaji Komriv
January 22, 2017

Server side rendering is addressed by both Angular 2 and React. If you use Angular1, then using services such as prerender.io can address any issues seen with js rendering. It really doesn't matter as long as you are aware of what the crawlers are seeing...


More by the stackchief