Let's start from the beginning, if you don't know what they even are, don't worry they are just different ways to render a webpage.
Or if you are feeling fancy, you can say these are different rendering techniques used to deliver content to users.
I prefer the first one.
But, what’s the difference? 🤔
Which one’s right for your project? Or better yet, when should you use each?
Let's flip right into it.
CSR(Client Side Rendering)
or should I say the cool kid of the bunch?
When a user requests a page, the server sends over a skeleton(HTML), and the browser (on the client-side) fills it in by fetching and rendering the actual content with JS.
It's like building the house after your guests arrive!
Perfect for highly interactive apps, and can make your single-page apps snappy but can be slow for first-page loads.
There is also one major flaw in this approach, the waterfalling problem.
The client performs multiple API calls to fetch data. If one API call is slow or dependent on the result of another, it creates a bottleneck, delaying the rendering of components or sections of the page.
This also makes CSR a terrible option for SEO, because when a web scrapper hits the website, all it sees is a 👆(not this one). I mean an empty HTML file.
SSR (Server-Side Rendering)
The server builds the full page before sending it to the browser. This means quicker initial loads and better SEO, but it can cause slower interactions once the page is loaded because of the back-and-forth between server and client for new data.
It's good for landing pages, and blogs with dynamic content that needs faster initial load and SEO-friendliness.
Because this time when a web-scrapper hits the website, it gonna see a beautifully hydrated HTML file.
But here a good question arises:
Why do I need to render this page again and again for my portfolio or blog website? Well because you are stupid!!
Thank god that this article is here to save you.
You don't need to render this page again and again. What you can do is something called SSG, generate it once, and yeah
SSG( Static Site Generation )
It’s like that nerdy, introverted kid who doesn’t really enjoy live interactions and prefers working behind the scenes.
Quietly preparing everything in advance. Super efficient, fast, and reliable, but freezes when it comes to on-the-spot interaction.
In other words, SSG is like pre-building your pages (at build time), so they're ready to serve instantly to users.
The downside?
They're not as dynamic, but for blogs or sites that don’t change often, it's a super-fast option!
Use it when you need a blazing-fast static site with minimal interaction but maximum performance!
Conclusion
The article emphasizes a recurring theme: each technique involves trade-offs between different features, so the best choice ultimately depends on your specific application logic and goals
Soooo, in short:
CSR = dynamic & reactive ⚡
SSR = speed & SEO love ❤️
SSG = pre-built speed demon 🏃♂️
Have a nice day :)
Top comments (0)