SSR image

Server-Side Rendering

Server-side rendering may be daunting but really isn’t that bad once you understand it.

 

 

Let’s break it down…

 

Server-side rendering (SSR) is not the ability of an FE framework to render markup, rather the process of rendering or preloading a front-end JavaScript framework to HTML/CSS on the server side. Why should you care about SSR?

 

SSR is a popular way to render normally client-side only single page app (SPA) on the server and then sending a fully rendered page to the client. SPAs create great advantages when it comes to responsiveness and UX over standard server rendered apps. SPAs usually tend to have slower initial rendering when it comes to a user’s experience since all of the JavaScript first must load for the page to be interactive. So, adding SSR lets you render your app on the server first, followed by the capabilities of SPAs on the client’s side such as such as rich site interactions and speed after initial load. A client’s JavaScript bundle can then take control to allow the SPA to operate as normal.

 

With the addition of SSR to SPA, you can create a universal app where the user does not have to wait for the JavaScript to load. Now you can receive a fully rendered HTML as the initial request returns a response. The connection of SSR to SPA is not the only use case scenario. SPA’s are just an example of client-side applications that leverage SSR to increase speed

 

There are many benefits to SSR including the user’s ability to own an app that can be crawled for its content even for crawlers that don’t execute JavaScript code. In other words, the HTML can be crawled without having to wait for the JavaScript to load, which subsequently improves SEO.

SSR is often used for getting pixels on the screen quicker or SEO. This type of rendering also helps with performance due to the due to a lot of the critical web resources being preloaded on the server side

 

Adding SSR to your client-side heavy applications always has its benefits and costs. Typically, if your website is public to thousands of users, server-side rendering should be incorporated and can be optimized on a Content Distribution Network (CDN). Integrating and utilizing universal apps’ power is a trending way in the front-end community.