What is CSR, SSR, SSG, ISR (Different Rendering Strategies) and which framework does it better (Angular, React, Vue)

01) CSR stands for Client Side Rendering. Here the entire website is rendered in the browser.

Use when building a admin dashboard and when seo is not important. Required javascript enabled on the browser.

Angular, React, Vue all support it out of the box.

02) SSR stands for Server Side Rendering. Here the webpages are rendered on the server and then sent to the client.

Use when speed and seo is important. App works without javascript enabled in browser.

Angular supports it via Angular Universal

React via NextJS

Vue via NuxtJS

03) SSG stands for Static Site Generation. Here the webpages are rendered on the build time.

Use when speed and seo is important. Host the app on any static hosting (netlify/vercel)

Angular supports it via Scully/Angular Universal

React via NextJS/Gatsby

Vue via NuxtJS/Gridsome

04) ISR stands for Incremental Static Regeneration. Here the webpages are regenerated on the fly based after the defined time.

Same benefits as SSG. Entire app doesn't need to be build after each change.

Angular doesn't support it

React via NextJS

Vue doesn't support it

Can you share an app you built and which rendering strategy and framework you used❓

Comments

[Arnav Singh]

Great Summarization

[pierretoure]

It may be important to note that CSR / SSG, and even ISR could be a lot more cheaper than SSR. Because you don't need to rebuild your website every time it is requested.

[Rahik-IF]

Really cheap, when you use high performance server like cloud servers/dedicated,then you will prefer other, because every requests then will take cost!😥😥