|1) Server Side Rendering|
|2) Client Side Rendering|
|3) Universal Rendering|
|4) Static Rendering|
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.
⚠️ 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.
Frameworks using CSR: Vue, React, Angular
Frameworks using Universal Rendering: Nuxt.js, Next.js, Angular Universal
Frameworks/Tools using Static Rendering: Gatsby, VuePress, Gridsome, Next.js, Hugo, Jekyll
|Server Side Rendering||Client Side Rendering||Universal Rendering||Static Rendering|
|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!