Franck Abgrall| π 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!
