Return to site
Return to site

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

ยท fullstack

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

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

PreviousNext
Cookie Use
We use cookies to improve browsing experience, security, and data collection. By accepting, you agree to the use of cookies for advertising and analytics. You can change your cookie settings at any time. Learn More
Accept all
Settings
Decline All
Cookie Settings
Necessary Cookies
These cookies enable core functionality such as security, network management, and accessibility. These cookies canโ€™t be switched off.
Analytics Cookies
These cookies help us better understand how visitors interact with our website and help us discover errors.
Preferences Cookies
These cookies allow the website to remember choices you've made to provide enhanced functionality and personalization.
Save