Login
October 10, 2023|
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.
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.
Helping organizations transform their IT infrastructure with top-notch Cloud Computing services
- Cloud Migration
- Devops
- AIML & IoT
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
About CloudThat
CloudThat is an official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, AWS EKS Service Delivery Partner, and Microsoft Gold Partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best-in-industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.
To get started, go through our Training page and Managed Services Package, CloudThat’s offerings
WRITTEN BY Mithilesh Dilip Tarkar
PREV
Comments