Before digging into how server side rendering improves customer experience to boost engagement and why use should implement it, let’s see how server side rendering and client-side rendering work in real world scenarios. I will introduce the concept of client-side rendering which happens in users’ web browsers. Then I will move to explain the concept of server side rendering and how it is better for business as well as users.
How server side rendering compares to client-side rendering when a person requests the site:
|Client-side Rendering||Server Side Rendering|
|Browser downloads HTML||Browser displays a non-interactive page|
|Browser executes framework||Browser executes framework|
|Page loads completely||Page become interactive|
In fact, when Angular and React reintroduced server side scripting, developers criticized them for being overzealous. Soon dynamic front-ends, interactive content, and smooth mobile app-like user experiences became the standard, but they introduced unnecessary complexities, causing overfed client-side executions with empty loading screens and further performance bottlenecks. That wait time to load a CSR page to SSR page may be milliseconds on a decent internet connect, but it is noticeable enough to look for a less-limiting solution.
“A client running a news portal was experiencing huge bounce rate on his website. This was taking a toll on his Google AdSense revenue. The website was developed in AngularJS. Because of client-side rendering the browser was loading an empty page, which was raising false alarm that the website is not working, making visitors leave the website the very moment.
AngularJS does not support server-side rendering. We upgraded the underlying technology to React and implemented server-side rendering in order to do away with the “empty page” problem. The redesigned website in React brought the bounce rate under the safe limits and inspired client to bring SSR in all his applications.”
Not every device is same in terms of hardware capabilities or has latest software. A page rendering on the client side relies too much on device’s hardware capability while rendering. A sub-capable hardware may fail to render the entire page in optimal time, thus, hampering user experience. The bounce rate of a page is directly proportional to its load time. Higher bounce is one of search engine ranking factors and may make Google slightly less prefer your website owing to extended load time. As a result, organic traffic to your website will fall, which will ultimately affect engagement on your website.
Although the final page will take the same amount of time to load and user only gets a glimpse of the page initially, server side rendering has the psychological edge from a user’s point of view. A semi-loaded page will look more compelling than a blank page to users.
In fall 2015, our React developers were attempting to rework an application originally built in AngularJS. We invested many hours of efforts to heighten the performance but the client insisted that the application was doing more or less the same in AngularJS. React was still a newer technology and we were quite skeptical about how server side rendering will work out. A few migrations and some changes in business logic and we were ready for the demo. The application out performed the client expectations. He insisted on going SSR way for all his future application.
Server Side Rendering is a luxury you can deliver in the form of a refined experience to your users. After all, the cut-throat competition doesn’t allow for anything that is any short of best.
Join fellow entrepreneurs! Get TOPS Infosolutions' latest articles straight to your inbox.
Did you know? Your slow loading web page…
Our big news today is all about TOPS…
Server Side Rendering (SSR) took a backseat when…
Technologies enabling real-time exchange of data bring new…
GDPR is Euro Zone’s new data protection regulations.…
Businesses around the world are ditching their PHP,…
Angular 7 brings many new features to Angular…
Did you know Node Package Manager or npm…
Node.js is ideal for building highly scalable, data…
Node.js turned the tide across web development when…