Server-Side Rendering also knew as SSR is a technique for rendering client-side applications on the server instead of the browser. Nowadays server-side rendering is getting more and more attractive as it enhances the user experience and thanks to React which is playing a very vital role in it.
Server-Side Rendering is becoming more popular because of its fast speed as React has revolutionized it.
How Server-Side Rendering works in the past?
The origin story of SSR
SSR is a technique that we are using from many last years in developing web apps. Let’s check out how SSR works in the old days.
Let’s say we built an app with PHP, the server compiled everything and sent down the requested page to the browser along with the data. It was really helpful in performance.
SSR revolution with JS
Yes, it is possible, with the help of Node.js we can set up a server which can help us to share code between both server and client-side.
These kinds of apps are known as a universal app or isomorphic app.
In these apps, Single Page Application (SPA) is rendered from the server. Hence the user doesn’t have to wait for the app to load.
JS has revolutionized the SSR in such a way that we can prerender the initial state with SSR so the user doesn’t have to wait for the application to load. And then we can combine it with SPA using any client-side framework.
Hence JS has solved our problem that we were dealing with in the past with SSR.
SPA has a good user navigation experience that we can still use with our Server-Side app.
Benefits of Server-Side Rendering
Let’s check out some amazing benefits of Server-Side Rendering
SSR is famous and becoming popular because of its fast speed. It loads some chunk of HTML on the user’s browser soon after his request. So it provides a good user experience.
SEO optimized apps
All search engines even Google has very limited capabilities to optimize client-side applications. But the Server-Side application’s content is crawlable and is easy to index and rank in Google.
Better Social Experience
With client-side application thumbnail and the title do not render properly while sharing on social media. But the Server-Side application has solved this issue also.
Disadvantage of Server-Side Rendering
Along with the benefits, there are some disadvantages of Server-Side Rendering that we cannot ignore.
Good for small applications
Server-Side Rendering work fines with a small application but it can degrade the performance with the increase of app size
The complexity of the SSR application can grow with the size and complexity of the application.
Extensive use of resources
SSR applications can use high resources as its Server is built on Node and you have to keep it up and running.
React Server-Side Rendering
It’s absolutely possible that you can set up server-side rendering without any framework but I will not recommend this as you have to take care of many things like bundling, reloading, etc from scratch.
Here are the frameworks that we can consider while developing SSR apps.
Next.js is becoming a popular framework in terms of server-side rendering because of its huge community.
It was open-sourced on 25th October 2016 by ZEIT company.
With Next.js there is no need to handle bundling, hot reloading, etc. It has all the options available for you.
Gatsby is another popular react static site generator framework. It’s blazing fast speed and some amazing starter templates make it really cool and easy to use.
Gatsby by default does not provide any SSR but we can build our apps using Node js and can server them on server
Client-side Rendering (CSR)
Client-side rendering is another technique for displaying web apps/pages to the user. But it works differently than SSR.
In client-side rendering HTML and JS files are served using CDN (Content Delivery Network) instead of a server. The browser will download all these files. In meanwhile the user will see a loading symbol.
Once all the files are download then it can make AJAX requests to fetch data.
Hence both these techniques have their own advantages and disadvantages and it purely depends on the requirements of the applications weather to go with CSR or SSR.
Some other factors like in terms of SEO and social media should also be kept in mind while choosing the preferable method.