You open a website, and boom—instant content. Or maybe... not so instant? Ever wondered why some pages load fast while others leave you staring at a blank screen for a few seconds? That’s all about
Rendering is the process of turning raw data (HTML, CSS, and JavaScript) into the visual webpage you see. But how and where this happens can make a huge difference in speed, user experience, and even SEO. Let’s break it down with a relatable analogy.
The Restaurant Analogy 🍔🍽️
Imagine you’re hungry (which, let’s be real, is all the time), and you have two dining options: fast food or a fancy sit-down restaurant.
1. Fast Food (Client-Side Rendering - CSR)
- You walk into a fast-food joint and order a burger.
- Instead of getting a ready-made meal, the server/ waitress hands you a tray with raw ingredients and a set of instructions.
- You take a seat, unwrap the ingredients, toast the bun, stack the patty, add the lettuce and sauces, and finally take a bite.
- It’s fresh and customised, but it took some time and effort before you could enjoy your meal.
This is how Client-Side Rendering (CSR) works. Your browser (the customer) gets minimal HTML and a bunch of JavaScript (the ingredients). It then assembles everything on the spot, rendering the page dynamically. The first bite takes time, but once you’re in, everything is fast!
Why choose this? CSR is commonly used in Single-Page Applications (SPAs), where most of the site’s functionality happens in the browser. This makes interactions feel smooth after the initial load, but it can slow down the first page visit. The trade-off is that users might experience a blank screen or a loading spinner before they see any content.
2. Fine Dining (Server-Side Rendering - SSR)
- You walk into a fancy restaurant, place your order, and sit back.
- The chef (or server 😉) in the kitchen prepares everything for you and serves a beautifully plated dish.
- You get your meal instantly, ready to eat, without any extra effort.
This is Server-Side Rendering (SSR). Instead of making your browser do all the work, the server (🧑🏼🍳) prepares the page and serves it fully rendered. Your experience is smooth from the start, but if you want to order something new, you may have to wait a bit longer.
Why choose this? SSR is great for search engine optimisation (SEO) and fast initial page loads because the server sends a fully-formed page, making it easy for search engines to crawl and index the content. However, every time you request a new page, the server has to do the work again, making navigation slightly slower compared to CSR.
Why Would You Choose One Over the Other?
| Feature | Client Side Rendering | Server Side Rendering |
|---|---|---|
| Initial Load Speed | Slower (browser does the work) | Faster (server does the work) |
| Subsequent Loads | Very fast (once loaded, everything is smooth) | Can be slower (each page request is processed separately) |
| User Experience | App-like, smooth interactions | Feels traditional, reloads for new pages |
| SEO Friendliness | Not ideal (content loads after JavaScript) | Great for SEO (content is immediately available) |
| Complexity | Requires more JavaScript optimization | Simpler, but can be slower for dynamic interactions |
What About SPAs and MPAs? 🤔
Now that we’ve covered CSR and SSR, let’s talk about Single-Page Applications (SPA) and Multi-Page Applications (MPA). These terms describe how websites handle navigation and page changes.
- SPA (Single-Page Application): Imagine a fancy buffet where you load your plate once and then just move around picking different items. In tech terms, an SPA loads a single HTML page initially and dynamically updates the content without refreshing the whole page. Great for speed, but can be heavy to load upfront.
- MPA (Multi-Page Application): This is your traditional restaurant experience. Every time you order something new, the waiter brings you a fresh plate. Each page request loads a brand-new HTML file from the server, which can be slower but more reliable.
Which One Is Better? 🤷♂️
As a real - experienced - engineer would say, it depends on the situation.
- If you want an app-like experience, go for CSR (SPA) (e.g., Gmail, Facebook, Trello).
- If you need better SEO and fast first loads, SSR (or MPA) is your best bet (e.g., blogs, news sites, e-commerce).
- Some modern approaches combine both (like Next.js), using SSR for the first page load and CSR for fast interactions after that. It’s like getting a fine dining experience and a fast-food option on the same menu.
The Final Takeaway 🍕
Takeaways, got it? Okay sorry had to much fun writing these stupid word jokes.
Just like food, the choice between CSR, SSR, SPA, and MPA depends on what you’re craving—speed, performance, or flexibility. Now, next time someone brings up "rendering techniques" at lunch, you can confidently explain it... or at least distract them by ordering dessert.
Anyway, I'm hungry now. Thanks for listening and bon appétit! 🍽️
About Tim Beeren
A Full Stack Developer, passionate about everything that has to do with creating. From coding, to hosting podcasts or composing music - as long as its a balance between technical and creative skills, I'm in! ☕️