CSR vs SSR vs SSG explained | Nextjs React Angular

Hello Everyone !
Today we are going to cover some concepts.
Here we need to keep Four things in mind:
- Dynamic content
- Speed of the app
- SEO
- build time

SSR:
So when you have multiple pages for example `/page/1, page/2 etc`. And all page are same in layout but the content is changing. At that time dynemic content makes sense. (if the no of page are less you can still opt for ssg.)

SSG:
When you need Speed and SEO. For example you have some pages that does not change much and your requirement is fast speed and SEO. Then you can opt for SSG. (If you have 1000s pages SSG would not be a good fit as build time will increase for it.) (I have said html/css for SSG just to explain in simple terms)

CSR:
When you app does not care about SEO then you can use CSR. Most of the SPA(single page applications) like react and Angular are CSR apps by default.

Nextjs can be SSG or SSR. (ISR is also one concept where it generates static pages but it periodically regenerates that page again. You can customise when to regenerate static pages. ISR is basically SSG+SSR)

I have tried to explain in simple terms. In order to do so I have simplified some concepts and changed the way it works. But in nutshell this is how CSR/SSR/SSG works.

#nextjs #react #csr #ssr #frontend #ssg #csrvsssr #tutorial #learning