VOOZH about

URL: https://dev.to/kefranabg/demystifying-ssr-csr-universal-and-static-rendering-with-animations-m7d

⇱ 🛠✨ Demystifying SSR, CSR, universal and static rendering with animations - DEV Community

Sometimes it might be hard to understand the differences between the different web rendering solutions. If you're a web developer, you've probably heard these words:

  • Server Side Rendering (SSR)
  • Client Side Rendering (CSR)
  • Universal Rendering (sometimes simplified to "SSR")
  • Static Rendering (or JAMStack depending on the tool you're using)

Here are 4 videos explaining in a simplified manner the process of each solution from a user's perspective. Know that the user scenario is the exact same in the 4 videos.

In the last section you'll find a comparison listing benefits and drawbacks of each solution.

Server Side Rendering (SSR)

⚠️ Note: Here I'm talking about full server side rendered websites (you know, old SSR websites 😉). This architecture was widely used before Single Page Apps were introduced.

Client Side Rendering (CSR)

Frameworks using CSR: Vue, React, Angular

Universal Rendering

Frameworks using Universal Rendering: Nuxt.js, Next.js, Angular Universal

Static Rendering

Frameworks/Tools using Static Rendering: Gatsby, VuePress, Gridsome, Next.js, Hugo, Jekyll

Comparisons

Server Side Rendering Client Side Rendering Universal Rendering Static Rendering
SEO 👍 👎 👍 👍
Fast initial load to show the full content of the page ⚡️⚡️ ⚡️ ⚡️⚡️ ⚡️⚡️⚡️
Full page reload when navigating yes no no it depends on the tool you're using
Requires server hosting yes no yes no
Fluid seamless user experience on page navigation 👎 👍 👍 👍
Integrates well with websites based on frequent/real-time updates 👍 👍 👍 😕

Feel free to contact me on twitter if you have questions!

🐦 Twitter 💻 GitHub