😴 🧙🌈 ʕ•ᴥ•ʔ

The following is a comparison on four different techniques used in web applications and websites to show and render content.

https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea


Hello there,

Next.js is a very popular React framework and one of the beautiful features is the ability to build your web application using different rendering techniques, such as

In this post, I will focus on explaining and comparing these techniques using visual diagrams with minimal texts, and my goal is to create a short note that you can quickly refer when needed.

Having said that, this post does not cover advance technical details and code snippets, that you might want to learn as a web developer.

Let’s get started..!

Client Side Rendering

This is what most of the web frameworks like Angular and React support out of the box. This is commonly suitable for single page applications (SPA) and applications with lot of user interactions (e.g Games) and highly dynamic content such as forms, and chat applications.

Basically web browser will initially load an empty HTML file. Javascript and styles which are loaded after, are responsible for rendering the full user friendly page in the web browser.

Server Side Rendering

Main disadvantage of CSR is that it is not Search Engine Optimized. Therefore most of the web frameworks, provide the ability to render the pages in server as well.

Not like CSR, Each page will initiate a request to App Server, where it dynamically renders and serves full HTML for that page. Since it requests and renders the page each time user requests, page serve time is more than a CSR application.

Static Site Generation

To avoid the rendering in each request, why don’t we generate those files in the build time, so that we can instantly serve the pages when user requests it.

This technique will come in handy if you want to build a web application with full of static content like a blog. One drawback is that the content might be out-of-date and your application is needed to build and deploy each time when you change the content. (in a CMS)

Incremental Static Regeneration

ISR is the next improvement to SSG, where it periodically builds and revalidates the new pages so that content never gets too much out-dated.

Comparison

To compare these four techniques, we will consider following metrics.

Some of the key thoughts are

Please note that, this comparison might not be accurate based on the different perspectives that you have. Feel free to correct me as well.

Conclusion

In Highlevel, we can divide these rendering techniques into two major categories based on the level of dynamic interactions that your app has.

❤️ Appreciate your feedback and thank you very much for reading.

#reads #pahan pera #webdev #ssr #csr #ssg #isr