Compare Server-side rendering and Client-side rendering

Server side rendering (SSR) and client side rendering (CSR) are popular techniques are rendering web pages on the web. Let's explore the differences and similarities between SSR and CSR to help you decide which technique is best for you.

Server-side rendering

Client-side rendering

Overall

Definition

Definition
Server side rendering is the traditional way of rendering web pages on the internet. The web server generates a complete web page and sends it to the browser which displays it. When users click on a link, the browser sends a request to the server and the entire process is repeated again.
Verdict Transitions between pages require a full page load and the transitions are not smooth.
Definition
Client side rendered websites interacts with the web browser by dynamically rewriting the current web page with new data from the web server. All necessary JavaScript, HTML and CSS code is retrieved by the browser on the initial load and is shown as needed. The page does not reload at any point in the process, nor does control transfer to another page.
Verdict The goal of CSR was to enable faster transitions which makes the website feel like a native app.

Tools

Tools
Any traditional web server like Apache, Node.js, Tomcat, etc.
Tools
Javascript client side frameworks like React, Angular, Vue, etc.

Websites

Websites
SSR and CSR distinction isn't black and white and websites use both these technologies.
Websites that are more on the SSR spectrum include
- Google Search
- IMDB
- Stack Overflow
Keep in mind that it is hard to tell. It is possible that some of these sites are built-using CSR tools but pre-rendered on the web server.
Websites
Websites that are more on the CSR spectrum include
- Trello
- Airbnb
- Dropbox
- Netflix
If you notice, the above list contains sites that behave like an application with dynamic loading. It's no coincidence that CSR is used to build these applications.

Use cases

Use cases
Great for static or mostly sites like blogs, review aggregators, etc.
Use cases
Ideal for websites that behave like applications and require rich client interactions. Other use cases include applications that surface private data hidden behind an authentication system such as customer portals or dashboards.
Performance

Initial Page Load Time

Initial Page Load Time
5 Stars
Very fast.
Initial Page Load Time
4 Stars
Slow compared to SSR.

Subsequent Page Load Time

Subsequent Page Load Time
4 Stars
Require full page load, non-smooth transitions.
Subsequent Page Load Time
5 Stars
Very fast, smooth transitions.
Search Engine Optimization (SEO)

SEO Process

SEO Process
SSR rendering presents the full HTML for a page in response to search engine bot request. This allows it to crawl and index the page immediately, avoiding any further processing such as rendering, data fetching, etc.
SEO Process
SEO is not trivial with CSR applications. Page contents are only revealed when the Javascript is fully rendered on the client-side.

SEO Time

SEO Time
5 Stars
SSR rendered pages are eligible for indexation immediately because entire page contents are available to search engine bots immediately.
Verdict SSR rendered pages are the best option if SEO is important for your website.
SEO Time
3.5 Stars
Google uses a two-wave process where pages are eligible for indexation once they are rendered, as rendering resources become available. Rendering on client side is expensive and takes processing resources. Google doesn't have infinite resources.
Verdict CSR pages will get index, get they will take extra time. No one knows exactly how long, but the general consensus is anywere from few days to weeks.

Speak Your Mind