In my last article, I discussed Rendering and the Process of Rendering in Web Development. You can read about it here.
Now, today I am going to explain the different types of rendering techniques that are mainly used in web development.
When a user navigates to a website then a request is sent to a server and data is returned from the server before the Critical Rendering Path (CRP) starts. Based on the way of receiving the data different type of rendering occurs in web development. These different types of renderings are -
Client Side Rendering (CSR)
Server Side Rendering (SSR)
Static Site Generation (SSG)
All of these mentioned methods have their benefits and drawbacks.
Client Side Rendering
Client Side Rendering (CSR) lets the browser do as much of the work as possible to render the page. Client Side Rendering means that the majority of the work of fetching data and creating HTML is done by the browser as the website visitor visits the page. In Client Side Rendering all the logic, data fetching, templating, and routing are handled on the client rather than the server. Every page the visitor visits by its respective URL are being created dynamically.
When the client requests a web page through the URL, the server will respond to the client with a blank page with all the JavaScript files that are needed by the page. These are then downloaded and run by the browser and used to build the web page. Data is fetched from an API based on the needs by the use of JavaScript.
Sites that use Client Side Rendering commonly have a loading spinner or some indication that the page is waiting for content to load. By delaying the initial load, the site is visible and everything is fully interactive and functional.
Client-side rendering is the default behavior for JavaScript applications. Popular Frontend Frameworks like React, Angular, and Vue use Client Side Rendering type.
import { useEffect, useState } from 'react';
function HomePage({ initialData }) {
const [data, setData] = useState(initialData);
useEffect(() => {
async function fetchData() {
const response = await fetch('/api/data');
const newData = await response.json();
setData(newData);
}
fetchData();
}, []);
return (
<div>
<h1>{data.title}</h1>
</div>
);
}
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const initialData = await response.json();
return {
props: {
initialData,
},
};
}
export default HomePage;
Benefits:
1. It's fast and possesses a low load on the server as all the content is processed and rendered on the client's browser.
2. For building a Single Page Application Client Side Rendering is best as it allows to reuse of UI components across the application, without requesting them again from the server. This can dramatically improve the performance of repetitive visits.
Drawbacks:
1. Client Side Rendering makes it hard for search engine robots to crawl web pages which leads to poor indexing and poor Search Engine Optimization(SEO) results.
2. It may cause poor user experience, particularly on slow connections. The user has to wait for content until everything is fully loaded into the browser which may result in the user leaving the site.
Server Side Rendering
Server Side Rendering (SSR) lets the server do as much of the work possible to render the page. Server Side Rendering means that the majority of the work of fetching data and creating HTML is done by the server. In Server Side Rendering all the logic, data fetching, templating, and routing are handled on the server rather than the client as in Client Side Rendering so that the heavy lifting work is finished before the web page reaches the browser.
When the client requests a web page through the URL, the server will receive the request and runs the JavaScript that is needed by the page to generate the DOM elements. After generating the DOM elements the server requests the data from API by the use of JavaScript. Then the server will build all the HTML for the request and return the web page to the client.
Server Side Rendering is faster than Client Side Rendering as it returns the entire result to the browser. Rendering on the server makes it possible to avoid sending a lot of JavaScript to the browser which helps to achieve a faster Time to Interactive (TTI).
Popular Front-end frameworks like React, Angular, NextJS, and Vue use Server Side Rendering type.
function HomePage({ data }) {
return (
<div>
<h1>{data.title}</h1>
</div>
);
}
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
export default HomePage;Benefits:
1. Server Side Rendering is best for SEO purposes. Since all the meta information is rendered with HTML when the page is requested by the browser from the server.
2. It provides a great user experience as it delivers all the content on request only. It is good for slow connections.
Drawbacks:
1. It can be expensive as it requires the setup and management of servers along with front-end code.
2. If the servers are slow then the experience will not be good for the end user. And if the servers are down then the whole website may go down.
Static Site Generation
Static Site Generation happens at build time. In Static Site Generation each page is complied and rendered as static HTML at build time. It generates many static paths based on the data needed for the page. It means it produces an HTML file with a separate URL for each file. At build time all these paths are rendered into static pages and then served incredibly quickly to the client.
When the client requests a web page through the URL, the server will receive the request and instead of running the JavaScript needed by the page as in Server Side Rendering, it will directly server the already build HTML page with static data to the browser. In Static Site Generation the server will contain all the pre-built pages for the website.
Popular Frontend Frameworks like NextJS, Nuxt, and Gatsby uses Static Site Generation.
function HomePage({ data }) {
return (
<div>
<h1>{data.title}</h1>
</div>
);
}
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
revalidate: 2400,
};
}
export default HomePage;Benefits:
1. It is best suited for SEO purposes. Since all the meta information is rendered with HTML when the page is requested by the browser.
2. It is even faster than Server Side Rendering as all the HTML is already compiled and stored on the server.
Drawbacks:
1. Website which changes more frequently are not suitable for Server Side Rendering as you need to compile and deploy the website again even for a small change.
2. If the website is quite long then the build time may be longer.
Conclusion
Client Side Rendering is the best fit for single-page websites. If your website needs to authenticate a user on every interaction Client Side Rendering is best.
Server Side Rendering is best for creating websites that require security. It is also suited for SEO purposes and slow connections.
Static Site Generation is best for creating websites that do not change often. It is also suitable for static websites.
References
Acronyms of Rendering - https://www.netlify.com/blog/the-acronyms-of-rendering
Rendering on the Web - https://web.dev/rendering-on-the-web
3 ways of Rendering on the Web - https://medium.com/compendium/3-ways-of-rendering-on-the-web-4363864c859e