Return to site

FRONTEND RENDERING STRATEGIES: What is CSR, SSR, SSG, ISR and which framework does it better ?

ยท angular

๐ŸŽ๐Ÿ) ๐‚๐’๐‘ ๐ฌ๐ญ๐š๐ง๐๐ฌ ๐Ÿ๐จ๐ซ ๐‚๐ฅ๐ข๐ž๐ง๐ญ ๐’๐ข๐๐ž ๐‘๐ž๐ง๐๐ž๐ซ๐ข๐ง๐ . ๐‡๐ž๐ซ๐ž ๐ญ๐ก๐ž ๐ž๐ง๐ญ๐ข๐ซ๐ž ๐ฐ๐ž๐›๐ฌ๐ข๐ญ๐ž ๐ข๐ฌ ๐ซ๐ž๐ง๐๐ž๐ซ๐ž๐ ๐ข๐ง ๐ญ๐ก๐ž ๐›๐ซ๐จ๐ฐ๐ฌ๐ž๐ซ.

Use when building an admin dashboard, and when SEO is not important.

It requires JavaScript to be enabled on the browser.

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

๐ŸŽ๐Ÿ) ๐’๐’๐‘ ๐ฌ๐ญ๐š๐ง๐๐ฌ ๐Ÿ๐จ๐ซ ๐’๐ž๐ซ๐ฏ๐ž๐ซ ๐’๐ข๐๐ž ๐‘๐ž๐ง๐๐ž๐ซ๐ข๐ง๐ . ๐‡๐ž๐ซ๐ž ๐ญ๐ก๐ž ๐ฐ๐ž๐›๐ฉ๐š๐ ๐ž๐ฌ ๐š๐ซ๐ž ๐ซ๐ž๐ง๐๐ž๐ซ๐ž๐ ๐จ๐ง ๐ญ๐ก๐ž ๐ฌ๐ž๐ซ๐ฏ๐ž๐ซ ๐š๐ง๐ ๐ญ๐ก๐ž๐ง ๐ฌ๐ž๐ง๐ญ ๐ญ๐จ ๐ญ๐ก๐ž ๐œ๐ฅ๐ข๐ž๐ง๐ญ.

Use when speed and SEO are important.

App works without the need of JavaScript to be enabled in the browser.

  • Angular supports it via Angular Universal
  • React via NextJS
  • Vue via NuxtJS

๐ŸŽ๐Ÿ‘) ๐’๐’๐† ๐ฌ๐ญ๐š๐ง๐๐ฌ ๐Ÿ๐จ๐ซ ๐’๐ญ๐š๐ญ๐ข๐œ ๐’๐ข๐ญ๐ž ๐†๐ž๐ง๐ž๐ซ๐š๐ญ๐ข๐จ๐ง. ๐‡๐ž๐ซ๐ž ๐ญ๐ก๐ž ๐ฐ๐ž๐›๐ฉ๐š๐ ๐ž๐ฌ ๐š๐ซ๐ž ๐ซ๐ž๐ง๐๐ž๐ซ๐ž๐ ๐จ๐ง ๐ญ๐ก๐ž ๐›๐ฎ๐ข๐ฅ๐ ๐ญ๐ข๐ฆ๐ž.

Use when speed and SEO are 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

๐ŸŽ๐Ÿ’) ๐ˆ๐’๐‘ ๐ฌ๐ญ๐š๐ง๐๐ฌ ๐Ÿ๐จ๐ซ ๐ˆ๐ง๐œ๐ซ๐ž๐ฆ๐ž๐ง๐ญ๐š๐ฅ ๐’๐ญ๐š๐ญ๐ข๐œ ๐‘๐ž๐ ๐ž๐ง๐ž๐ซ๐š๐ญ๐ข๐จ๐ง. ๐‡๐ž๐ซ๐ž ๐ญ๐ก๐ž ๐ฐ๐ž๐›๐ฉ๐š๐ ๐ž๐ฌ ๐š๐ซ๐ž ๐ซ๐ž๐ ๐ž๐ง๐ž๐ซ๐š๐ญ๐ž๐ ๐จ๐ง ๐ญ๐ก๐ž ๐Ÿ๐ฅ๐ฒ ๐›๐š๐ฌ๐ž๐ ๐š๐Ÿ๐ญ๐ž๐ซ ๐ญ๐ก๐ž ๐๐ž๐Ÿ๐ข๐ง๐ž๐ ๐ญ๐ข๐ฆ๐ž.

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

All Posts
ร—

Almost doneโ€ฆ

We just sent you an email.ย Please click the link in the email to confirm your subscription!

OK