What is Client-Side Rendering, and How is it Different From Server-Side Rendering?

Client-Side Rendering (CSR) is the increasingly popular alternative to SSR.

The difference between the two is similar to ordering a prepared meal kit from a service like Blue Apron or Green Chef, or buying all the ingredients and making the meal yourself. 

Client-side rendering loads a website’s JavaScript in the user’s browser, not the website’s server. It’s ordering the prepared meal kit. 

Websites built with front-end JavaScript frameworks such as Angular, React or Vue all default to CSR. This is problematic from an SEO standpoint because when web crawlers encounter a page on your website, all they see is a blank screen. 

Server-side rendering, meanwhile, is the more traditional option; it’s buying the groceries and cooking the meal yourself. It loads your JavaScript content on your website’s server. 

SSR dates back to the time when JavaScript and PHP were primarily backend technologies, and Java was used simply to make HTML-based websites more interactive rather than building them from scratch. 

SSR converts your HTML files into information that’s readable for the user-end browser. Googlebot can see the basic HTML content on your web page without JavaScript in the way, while the user sees the fully-rendered page in all its glory. Your website is ranked properly on Google, and your user is treated to a web experience that’s a feast for the eyes and ears.

Related Posts

Server-Side Rendering (SSR) Made Easy With Angular Universal 9+

The Angular team recently, announced a pre-render builder in Angular Universal, in Jan 2020 to be specific. Angular Universal is for server-side rending (SSR); with these new…

There’s a Better Solution Still: Prerendering

SSR has a lot of benefits that compensate for the technical deficiencies and deteriorated user experience of CSR. However, it has its own limitations and may not…

Server-Side Rendering Disadvantages

If SSR is so much more technically well-optimized and SEO-friendly, why don’t all websites use it? Turns out, using SSR for your website does come with some…

Advantages of Server-Side Rendering

We’ve already discussed some of the SEO benefits of server-side rendering: flawlessly crawled and indexed JavaScript pages, no more wasted crawl budgets or plummeting search rankings, no…

What is SSR?

Server-side rendering (SSR) is a method of loading your website’s JavaScript on your own server. When human users or search engine web crawlers like Googlebot request a…

Server-side rendering (SSR) with Angular Universal

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get…