The Ultimate Metaphor for SSR, CSR and Pre-Rendering
The Ultimate Metaphor for SSR, CSR and Pre-Rendering
I’d like to explain CSR, SSR and Pre-rendering with a concrete comparison: a chair manufacturer.
SSR, CSR, and Pre-Rendering
I’ve found many misconceptions about the different rendering methods: Server-Side, Client-Side, and Pre-rendering. Therefore, I’d like to explain it with a concrete comparison: a chair manufacturer.
Chairs
Imagine that we are a chair manufacturer. The clients order chairs, and we send them. We sell one chair but with different colors and cushions.
Client-Side Chair
Let’s call this the Ikea way. Our warehouse has a box with all the needed pieces, paint, and plans to build all the chair models. We always send the same box when a client orders a chair and the client builds the chair at home.
This idea is similar to Client-Side rendering, where the server sends all the files needed for the website, and then the browser makes all the work to build the website.
Server-Side Chair
Another option is that we wait for a client to make an order. Once we have an order, we build the chair with the client’s specifications and send it.
This is Server-Side rendering, where each order is handled independently, and the final product is built and then delivered to the client.
Pre-Rendering
The last way is to build all the combinations of chairs before clients even order them. First, we make the chair with the big cushion in all colors. Then we continue to do so for all kinds of chairs that clients can order. Finally, when an order comes in, we find the chair that matches and send it.
The difference between the SSR and Pre-rendering is that the chairs are already built when the client's order comes. Therefore, the whole company might be on holiday because we only need a clerk (CDN) to deliver the requested chair. On the other hand, to fulfill an order in SSR, we need a whole team waiting until the order comes in.
More Than Chairs
If you understand the comparison and can apply it to servers and websites, you’ll be in a better position to make decisions. Hypes and tools come and go, yet the underlying concepts stay.
I hope that you find this metaphor clear enough and you use it with people who might confuse one or the other.
If you like this post, consider sharing it with your friends on twitter or forwarding this email to them 🙈
Don't hesitate to reach out to me if you have any questions or see an error. I highly appreciate it.
And thanks to Michal and Sebastià for reviewing this article 🙏