Server Side Rendering to Improve Your Web Application (2024)

What is Server Side Rendering?

Server Side Rendering(SSR) is a technology associated with fetching and rendering web pages on browsers. It is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client.

There are many popular websites such as Facebook, Github and LinkedIn that use SSR. Let’s look at how I can see my Github page content being sent from the servers.

What I observe,

• The server has sent the content as a HTML page to the browser in a single response.
• That means it has fetched and processed all my data in the server side.
• Sent content does not include any styles, images or fonts. These are separately loaded.
• Browser hasn’t sent multiple API calls to update parts of the application UI.

Client Side Rendering vs Server Side Rendering

Client Side Rendering(CSR) applications will first fetch the skeleton of the application without any data and then request for data in separate requests. Here the server is only responsible for sending the page skeletons and requested data.

Instead, when content is requested from a server with SSR, the server sends the complete template to the browser. Before sending it, processes data and determined what to be included in the template.

Server Side Rendering Pros and Cons

SSR and CSR come with their own advantages and disadvantages. That’s why we have to always pick our approach based on the use of our application.

Advantages with Server side Rendering.

• Faster initial page load — The app does not need to wait for multiple APIs to complete execution. Instead the data will be populated within the server side.
• Better page load in slower networks — Because less number of resources are loaded.
• Better page load in older devices — Minimum incompatibility issues with browser clients.
• SEO capability — Since the page load happens in server side, it is easier for the SEO crawlers to search, explore content and index the pages.

Disadvantages with Server Side Rendering.

• Full page reloads — The server will always fully reload content between the pages.
• Incompatibilities — SSR can be incompatible with some third party libraries.

We cannot enable/disable Server Side Rendering in our application as the project progresses. The entire application framework should support SSR. It is better to determine whether we need to go with SSR in the design phase.

Following are some of the frameworks that enable Server Side Rendering.

• Next.js — React based framework. (https://nextjs.org/)
• Nuxt.js — Vue.js based framework. (https://nuxtjs.org/)
• Gatsby — React, GraphQL based framework. (https://www.gatsbyjs.com/)
• Angular Universal — Angular based framework. (https://angular.io/guide/universal)

Next.js is a React based framework with all the features that we need for production, such as Server Side Rendering, Typescript support, smart bundling, route pre-fetching, and more.

This framework has multiple features that allows the developers to execute server side code before sending the content. These functions can be used to handle data in the server side.

Next.js vs React

Being a lightweight version of React, Next.js offers multiple advantages over React.

• Server Side Rendering support — We cannot get SSR out-of-the-box with React.
• Less need for build tools — No need of extra tools and bundlers as everything is included within the initial configuration.
• SEO support — SSR enables crawlers to better SEO Next.js applications.
• Image optimisation — Next.js includes an API to optimise images. This tool optimises each image’s size before serving them to the clients.

Next.js Components

A component in Next.js can have specific functions to handle the server-side data. One of the most important functions is getServerSideProps that can be exported by any page component. Page components have the type of NextPage.

import React from 'react';
import type { NextPage } from 'next';
import { useRouter } from 'next/router';interface Props {
 name: string
}const NameComponent: NextPage<Props> = ({ name }: Props) => {
 const router = useRouter();return (
 <div>
 <p>The Name Value: {router.query.name}</p>
 </div>
 );
};export const getServerSideProps = async (context: any) => {
 // This function is executed in the server side.
 // The name can be fetched from the server sidereturn {
 props: {
 name: 'buddhi'
 }
 };
};export default NameComponent;

The getServerSideProps function only runs on server-side and never runs on the browser. Whatever props are returned from the getServerSideProps function will be injected into the main component props.

I work as a Senior Software Engineer/Senior WebRTC Engineer at Telzee.io. We are based on USA and Sri Lanka and we develop custom Telehealth solutions.

Our telemedicine starter kit consists of all the tools necessary to start your online consultation. Built for both an individual or team. WebRTC ensures the security of your patient’s data.

Powerful features to improvise a real physical environment of a healthcare institute from high quality video conferencing, patient queues, payment collection, ERM integration, Staff Management, Whiteboard etc.