Full Stack Development

4 Mins Read

An Overview into SSR, CSR and SSG

Voiced by Amazon Polly

Introduction

In 2023, we have more than 10+ Frontend Frameworks in the market. Some of the popular ones are React, Angular, Vue, Next.js, Preact, Ember, Backbone, Svelte and many more. Every Framework comes with some advantages and disadvantages. Very importantly the kind of Rendering strategies it supports becomes important to build a scalable, responsive, fast and SEO-friendly application. Let us understand the different types of UI rendering strategies.

Customized Cloud Solutions to Drive your Business Success

  • Cloud Migration
  • Devops
  • AIML & IoT
Know More

Server-Side Rendering

Server-Sider Rendering is when the frontend framework renders the entire HTML page on the server side and then passes it to the client. 

Advantages

1. Great for SEO  

It is proven to be great for SEO, as the web crawlers are able to access the metadata and information on the page easily.  

2. Improved Social-Sharing  

SSR pre-loads the data of the page and thus is great for sharing content on social sites. As the sites will be able to access the metadata of the page with ease.  

3. Reduced load on the client

With SSR, the headache of managing the data to be passed to the client lies with the server. Hence the load on the client-side is reduced drastically. 

Disadvantages

1. Complex Server-side Logic  

Developers will have to write logic that is complicated on the server side to handle SSR tasks.  

2. Increased Server Load  

The server has a higher load due to SSR tasks. 

3. Limited Client-Side Interactivity 

With SSR Rendering, the client-side interactivity is limited as the content is made ready from the server itself. 

Example of Server Component using Next.js

async function fetchPosts() { 
  const res = await fetch("https://jsonplaceholder.typicode.com/posts"); 
  return res.json(); 
} 
 
async function ListsOfPosts() { 
  const posts = await fetchPosts(); 
  return ( 
    <div className="post-list"> 
      {posts.map((post) => ( 
        <div key={post.id} className="post-listing"> 
          <h3 className="post-title">{post.title}</h3> 
          <p className="post-body">{post.body}</p> 
        </div> 
      ))} 
    </div> 
  ); 
}; 
 
export default PostList; 

Client-Side Rendering

A very popular approach to UI rendering is client-side rendering which became popular with UI libraries and frameworks like React and Angular. With CSR, the server sends an empty page to the client and the client updates the data using Client-Side Rendering. Thus, updating the data in real-time. 

Advantages of CSR

1. Rich Interactivity 

Client-Side Rendering is popular because of the benefits of the rich UI interface it can generate which leads to a better user experience on the frontend.  

2. Reduced Server Load  

CSR helps to reduce load time on the server as the server sends an empty page and the client handles the task of updating the page with the required content.  

3. Component Re-usability  

One of the biggest advantages of CSR is component re-usability. As a component is a complete piece of UI code. It can be reused anywhere in the app structure and used for multiple use cases.  

4. Better Performance for SPAs

CSRs are a must for single-page applications. As it helps to give great UI Performance for SPAs. 

Disadvantages of CSR

1. Poor SEO Performance

The server sends an empty page which is then updated by the client-side frameworks. This means that the web crawlers are not able to pre-fetch any content or metadata information from the pages. Thus, leading to poor SEO performance. 

Example of CSR Component using Next.js

'use client' 
import React, { useEffect, useState } from 'react' 
const Posts = () => { 
 
const [posts, setData] = useState(null) 
useEffect(()=>{ 
 
const fetchPosts = async() => { 
const res = await fetch("https://jsonplaceholder.typicode.com/posts"); 
setData(res.json()) 
} 
fetchPosts() 
},[]) 
 
return ( 
 
<div className="post-list"> 
{posts.map((post) => ( 
<div key={post.id} className="post-listing"> 
<h3 className="post-title">{post.title}</h3> 
<p className="post-body">{post.body}</p> 
</div> 
))} 
 
</div> 
) 
} 
export default Posts 

Static Site Generation

SSG or Static Static Generation became popular in recent years with Frameworks like Gatsby and Hugo. SSG renders the content at build time and serves static HTML on the page thus removing the need for server processing and database queries. In SSG, the web pages are pre-built during the development or build process, and the resulting HTML files are typically served from a content delivery network (CDN) or a web server. 

Advantages of SSG

1. Improved Performance 

SSG adds a performance boost to your application modules. As it serves static HTML it renders the content extremely fast.  

2. Offline Availability  

If there is network failure and bandwidth bottlenecks, still SSG will render the content due to its nature of pre-building and serving static content.  

3. Highly Scalable  

SSG can be used to make highly scalable apps with very few lines of code compared to other types of UI rendering strategies. 

Disadvantages of SSG

1. Learning Curve  

SSGs have longer learning curves than another type of UI rendering strategies like Server-side rendering. 

2. Handling Forms and Authentication 

Handling Forms and Authentication can become complex in SSG. These tasks require server-side processing. Hence, additional client-side code or external services may be required.  

3. Time-Consuming Build Times  

For large or complex applications, the build time for SSG will be much higher. Thus, impacting the user experience of the UI.  

4. Lack of Real-Time Updates 

 As SSG is useful to server static HTML, for use cases like Real-time updates it is not a suitable type of UI rendering strategy. 

Example of SSG Component using Next.js

// called at Build Time 

export async function getStaticProps() { 


  const res = await fetch("https://jsonplaceholder.typicode.com/posts"); 

  const posts = await res.json() 

  


  return{ 


  props:{ 


  posts  


  } 


  } 


} 


  


function BlogData({ posts }){ 

  


return( 

<div className="post-list"> 

{posts.map((post) => ( 

<div key={post.id} className="post-listing"> 

<h3 className="post-title">{post.title}</h3> 

<p className="post-body">{post.body}</p> 

</div> 

))} 

 

</div> 

) 

} 

export default BlogData; 

Which UI Rendering Strategy should you use

So, when it comes to implementing a UI Rendering strategy. It will depend from project to project. So it depends on your use case of whether you are building a SaaS application or you are building an internal admin app for use internally within the organization. Direct type of UI rendering strategies can be used. However, a best practice is to stick with a framework or library that supports all three rendering strategies which are SSR, CSR, and SSG. So that you can leverage the best of all the three worlds whenever you need them. 

Conclusion

In this blog post, we have seen in detail the examples of three different UI rendering strategies- Server-Side Rendering, Client-side Rendering, and Static Site Generation, and their uses, examples, advantages, and disadvantages.

Get your new hires billable within 1-60 days. Experience our Capability Development Framework today.

  • Cloud Training
  • Customized Training
  • Experiential Learning
Read More

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 850k+ professionals in 600+ cloud certifications and completed 500+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training PartnerAWS Migration PartnerAWS Data and Analytics PartnerAWS DevOps Competency PartnerAWS GenAI Competency PartnerAmazon QuickSight Service Delivery PartnerAmazon EKS Service Delivery Partner AWS Microsoft Workload PartnersAmazon EC2 Service Delivery PartnerAmazon ECS Service Delivery PartnerAWS Glue Service Delivery PartnerAmazon Redshift Service Delivery PartnerAWS Control Tower Service Delivery PartnerAWS WAF Service Delivery PartnerAmazon CloudFront Service Delivery PartnerAmazon OpenSearch Service Delivery PartnerAWS DMS Service Delivery PartnerAWS Systems Manager Service Delivery PartnerAmazon RDS Service Delivery PartnerAWS CloudFormation Service Delivery PartnerAWS ConfigAmazon EMR and many more.

Share

Comments

    Click to Comment

Get The Most Out Of Us

Our support doesn't end here. We have monthly newsletters, study guides, practice questions, and more to assist you in upgrading your cloud career. Subscribe to get them all!