Return to site

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

October 29, 2021

𝟎𝟏) 𝐂𝐒𝐑 𝐎𝐭𝐚𝐧𝐝𝐎 𝐟ðĻðŦ 𝐂ðĨðĒ𝐞𝐧𝐭 𝐒ðĒ𝐝𝐞 𝐑𝐞𝐧𝐝𝐞ðŦðĒ𝐧𝐠. 𝐇𝐞ðŦ𝐞 ð­ðĄðž 𝐞𝐧𝐭ðĒðŦ𝐞 𝐰𝐞𝐛𝐎ðĒ𝐭𝐞 ðĒ𝐎 ðŦ𝐞𝐧𝐝𝐞ðŦ𝐞𝐝 ðĒ𝐧 ð­ðĄðž 𝐛ðŦðĻ𝐰𝐎𝐞ðŦ.

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
 Return to site
Leave a Comment