What is SSR? And what are the efficient technologies for Server Side Rendering?

SSR or server-side rendering is one of the hot topics in web development these days and after the introduction of JAMStack, I believe every IT organization is using or going to use SSR down the lane.

Before going into the core of SSR let's understand what is SSR? and when to use it?

SSR is nothing but the methodology for rendering the web-application to the server rather than the browser itself. In other words, by using SSR you can load your SPA (Single Page Application) on the server and after that, you send a fully rendered page to the client which is generally your browser only (most of the time).

In the absence of SSR, all your server ships is an HTML page with "no-body", just some script tags that are then used by the browser to render the application.

The major benefits of using SSR are:

1. Faster first-page load time and also the better UX (User Experience).
2. For SEO (Search Engine Optimization). It is because CSR (Client Side Rendering) applications are not efficiently and correctly indexed by any search engines not even google (not yet!).
3. It is useful for the applications which need to be run when the end-user has slow internet connections.
4. It is the recommended approach for static websites.
5. Good for creating PWAs also

Everything which is great and is easy to use also comes with some cons and SSR is no exception.

The major drawbacks of SSR are:

1. It's simple to understand but complex to implement and trust me it's complexity will increase with your application size.
2. Your server will engage itself with frequent server requests.
3. Full page reloads and this is something that you need to worry about.
4. Not recommended for complex web applications because of the performance issues (due to the overall slow loading time of pages).

Now we know about SSR and its pros and cons. Let's understand what are the technologies these days in the market for creating better SSR applications?

I am personally a big fan of React JS because of its better DX (Developer Experience) and also because of its powerful features.

But wait for a second, can you achieve SSR in a React JS web application? The answer is Yes you can !!

All you need is an additional setup for that.

You can check out below link for the setup:

https://www.freecodecamp.org/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/

"But I personally do not want to mess with React for the SSR because there are other frameworks written in React for the SSR purpose and they are blazing fast and exceptionally optimized for their size"

The following are the technologies which I prefer for the SSR. They are:

1. Next JS
2. Gatsby JS

There are other technologies also in the market for SSR. I am mentioning a couple of them

1. Nuxt JS
2. Nest JS

Next JS:

It is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It's a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

Netflix is using Next JS for their job portal web application

Gatsby JS:

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. It can be used to build static sites dealing with PWAs.

The documentation website for React is built with Gatsby JS.

You can explore these technologies as per your requirements for the applications.

I hope this little information will help you to understand the technologies and their need for the development of web applications.

And finally, I would like to thank you for reading this article and I hope that you and your near ones will be safe in this COVID-19 situation.