An Overview into SSR, CSR and SSG

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.

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.

Reference

https://blog.logrocket.com/react-server-components-next-js-13/

About CloudThat