What is the difference between SSR, ISR, CSR, SSG

What is the difference between SSR, ISR, CSR, SSG

Idukpaye alex's photo
Idukpaye alex
·

5 min read

Table of contents

Introduction

SSR, ISR, CSR, and SSG are called rendering modes because they are the different ways in which web apps render each other. In this article, we will look at each of them in detail and talk about the type of web technology/framework utilizing each of them.

CSR

CSR stands for Client Side Rendering. It is a process where the page is loaded on the client's browser rather than on the server. CSR is a rendering mode in which the browser sends a request to the server and the server responds by sending an empty HTML page with only a reference to your JavaScript bundle and your CSS styles.CSR apps are called Single Paged Applications

How does CSR work?

  1. Initial Request from the browser

  2. The server responds by sending back an empty HTML page with only a reference to your JavaScript bundle and your CSS styles.

  3. The browser then starts downloading the JavaScript of the page.

  4. The browser then executes the JavaScript.

  5. The page is now interactive.

Advantages of using CSR

  1. Mobile app feel -due to the navigation performance of the app; it has a mobile app feel

  2. Great with Progressive Web Apps - Client Side Rendered applications work great with PWAs because the code can be entirely rendered on the browser.

  3. Quicker navigation of the website - CSR offers quicker navigation between pages because no new HTML file has to be downloaded

Main disadvantages of using CSR

  • Not good for SEO - CSR is not good for SEO because it takes time to convert JavaScript to HTML, and also because the response gotten from the server is an empty HTML page with only a reference to a JavaScript bundle and CSS styles.

When to use CSR

  1. When your application has large and dynamic data.
  2. When your application has a very complex UI with many pages / features.

Examples of Client-Side Frameworks

  1. React

  2. Vue

  3. Angular

SSR

SSR stands for Server Side Rendering. SSR is a procedure where rendering is executed by the server. It is a rendering mode in which the client sends a request to the server and instead of the server delivering an empty HTML page, it responds by delivering a fully populated HTML page.

The server will serve the page on demand every single time meaning the HTML is generated on each request.

How does SSR work

  1. Request is sent to the web server by the client.

  2. The browser then connects to the server, which already has the pre-rendered HTML and CSS code for the page.

  3. The server then responds by sending back a fully occupied HTML page.

  4. The browser then downloads the JavaScript of the page which is readily available on the server.

  5. The browser then executes the JavaScript.

  6. The page is now fully loaded and interactive.

Advantages of using SSR

  1. Good for SEO - Since Server Side Rendered pages have a faster initial page load time, search engine bots can crawl and index pages very well.

  2. Amazing User Experience - Since SSR pages have a faster initial page load time, they provide a good user experience.

  3. No slow internet connection barrier - If a user has a slow internet connection, he/she can view the rendered HTML page while the JavaScript is processing.

Main disadvantages of using SSR

  1. Server cost - SSR applications often need bigger and powerful servers to provide high performances which often lead to high expenses in acquiring and maintaining the servers.

  2. The complexity of deployment and hosting - Configuring your app to work in a different environment on a server can be difficult

  3. Slow page transitions.

When to use SSR

  1. When you want good SEO performance.

  2. When you want faster data transmission.

  3. When you have dynamic content.

Examples of Server Side Frameworks

  1. NuxtJs

  2. NextJs

  3. SvelteKit

SSG

SSG stands for Static Site Generator. SSG is a tool that generates a full static HTML website on a CDN(content-delivering network).In SSG the HTML is generated at build time.

How SSG works

  1. At build time before the content reaches the CDN, a SSG or Framework reads content from the files.

  2. The content then gets rendered to HTML based on templates and served to the CDN.

  3. The results are then saved in a directory and laid out to match the source files and keep them available when requests to view the contents are made.

Advantages of using SSG

  1. Blazingly fast - Statically generated websites are blazingly fast because the content of your website is generated as HTML files ahead of time. When a user comes to your application and requests for a certain page, the server will quickly respond and serve it. It doesn't have to generate any HTML, it just serves it.

  2. Easiest to Host.

  3. Great SEO performance.

Main disadvantages of using SSG

  1. Build time - The biggest penalty of SSG is the build time because once the pages are published, the only way to update them is by building the application again which might take some time.

When to use SSG

  1. When you have a lot of static content.

  2. When you want good SEO performance.

  3. When you want a fast website.

    Examples of SSG Frameworks

  4. NuxtJs

  5. NextJs

  6. Gatsby

ISR

ISR stands for Incremental Static Regeneration. It is a rendering mode that uses static generation on a per-page basis without needing to build the entire site.

Examples of frameworks with ISR capabilities

  1. NuxtJs

  2. NextJs

Conclusion

I hope you enjoyed it! if you want to support me, please follow me or buymeacoffee here Thanks! Have a nice day

JavaScriptWeb Developmentjavascript frameworkBeginner DevelopersReact