Web Rendering Strategies

• It can be of following types:
  • CSR
  • SSR
  • SSG
  • ISR

CSR (Client side rendering)

• Here the entire website is rendered in the browser.
• Use when building an admin dashboard and when seo is not important.
• Required javascript enabled on the browser.
• Support:
  • Angular out of box
  • React out of box
  • Vue out of box

SSR (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.
• Support:
  • Angular supports it via Angular Universal
  • React via NextJS
  • Vue via NuxtJS

SSG (Static site generation)

• aka Pre-rendering
• 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)
• Support:
  • Angular supports it via Scully/Angular Universal
  • React via NextJS/Gatsby
  • Vue via NuxtJS/Gridsome

ISR (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.
• Support:
  • Angular doesn’t support it
  • React via NextJS
  • Vue doesn’t support it

SEO

• If you want your site to be SEO friendly you need to have server side rendering
• You need to render important HTML in the beginning which a web crawler can index, then later on you can render remaining HTML content