📖 Parts |
---|
1) Server Side Rendering |
2) Client Side Rendering |
3) Universal Rendering |
4) Static Rendering |
5) Comparisons |
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!