What is SSR or Server-side rendering?

In the arena of SPAs (Single Page Application) or React/Vue/Angular it's essential to know what server-side rendering is.

So, What is server-side rendering?

Server-side rendering is what you can say rendering in server.

As all JS libraries give us some functions that actually render all HTML, all styles, and all interactivity. So, that is what gives you the fast loading. But here comes the tricky part all browsers may not support JavaScript or in some cases, you shouldn't rely on JavaScript.

So in server-side rendering, all JavaScript functions run in the Server, and when your browser requests for data, it provides the compiled HTML, CSS, etc. Your website just renders like a pure HTML, CSS-written website.

Okay, But why should I care?

In this bright time of technology we just don't write HTML. It's the digital face of your brand. So you must ensure that everyone can see what you intended everyone to see. You cannot predict the end-user issues or what and what not that browser doesn't supports but for sure that browser supports plain HTML, CSS, so you should provide that as much as you can, to prevent unexpected behavior or an error.

That's where server-side rendering comes in handy. As it provides the server-side rendering, it actually helps the browser or any browser that asks for data to show it doesn't matter if that browser supports JavaScript or not.

How can we do that?

There are lots of frameworks out there, are just ready for use like Next.js, Gatsby.js. I personally like to use Next.js but every other framework is fine as well. It also provides code splitting and a whole other bunch of handy functionality. But with all of this, It's just making sure your powerful JS framework gives the most out of it, by ensuring server-side rendering.

Are there any other rendering methods out there?

Yes, as from previous you can guess that the framework provided JS functions can be run by and in your browser (which all updated browsers can just run fine) but ensuring the best user experience is what we frontend developers do.

So lastly, there is a lot of libraries and frameworks for you to make a difference, choose what works for you best and keep accessibility in mind and do good deeds.

Comments

[Zikitel22]

As all JS libraries give us some functions that actually render all HTML, all styles, and all interactivity. So, that is what gives you the fast loading.

This is misleading. Client side rendering does not give you fast loading. At least if we are talking about first load which actually matters for page rank. If you want to see something on your screen browser needs to make HTTP request and download whole JS bundle(or critical chunks in case of code splitting) and that hell lot of bigger than HTML response

So in server-side rendering, all JavaScript functions run in the Server, and when your browser requests for data, it provides the compiled HTML, CSS, etc. Your website just renders like a pure HTML, CSS-written website.

Again not true. You can and will bundle javascript in your server rendered response meaning it will be executed at some point. You mentioned NextJs. That works exactly like that and the moment when "static" HTML+CSS site becomes interactive is called hydration

[Akhlak Hossain Jim]

Okay, let's say you are true. Client-side rendering isn't providing the fast loading. Then tell me what actually giving? and in this kind of scenario like loading time we actually compare to other technology (cause there is no absolute parameter for that), compared to which technology do you think CSR isn't loading 1st enough.

And second of all I didn't explained what nextjs actually dose behind the scene. This is just a surface level description of SSR. And what it does is explains SSR for anyone including who haven't exposed with technical field. So that's why I haven't used so much technical wording.

[Zikitel22]

Ill try to explain what happens after you type url into browser and hit enter

CSR

• HTTP request is made - blank page is shown
• Server gets response which looks more or less like this - blank page is shown

<html>
<script src="/bundle.js">
<noscript>Enable javascript to run this page</noscript>
</html>

• client makes request to download - blank page is shown
• client gets resonse with js bundle - blank page is shown
• client starts to parse js bundle - blank page is shown
• client executes javascript think like ReactDOM.render - blank page is shown
• some HTML is created by js - blank page is shown
• HTML is rendered by browser - Finally we can see something yay !

---

SSR

• HTTP request is made - blank page is shown
• Server gets response which looks more or less like this - blank page is shown

<html>
<script async src="/nextJsBundle.js"/>
<p1>This is my fancy content</p1>
</html>

• client makes request to download nextJsBundle.js but since its async and we already have actual HTML we can download bundle and render HTML in parallel - Finally we can see something yay !

But speed comes with price. SSR is more complex and therefore more things can go wrong especialy in complex applications (not talking about your personal blog post)
It depends what type of application you want to implement. If SEO & performance is your concern go with SSR if not CSR will do just fine

Hope its more clear now