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 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.
- 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
Very fast.
Initial Page Load Time
Slow compared to SSR.
Subsequent Page Load Time
Subsequent Page Load Time
Require full page load, non-smooth transitions.
Subsequent Page Load Time
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
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
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.
Comments (1)
J. K.
React is a client side framework but it could be rendered on server side using node or Razzle.