Server side rendering to improve SEO performance of your application/website

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 determines 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.

Frameworks

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 feature. (https://angular.io/guide/universal)

Next.js

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 of Next.js.
• 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 side

   return {
       props: {
           name: 'buddhi'
       }
   };
};

export default NameComponent;

```
Example Next.js Component

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.

Advantages to Websites/Applications

We have delivered projects which featured Server Side Rendering with Next.js. This approach had multiple advantages to the applications.

• Can help SEO your website - The public pages of the application can be better indexed, provided that we use SSR for pages that display no sensitive information.
• Generate public pages - We implemented custom profile pages for applications and directories. These pages were public, shareable and easily discoverable in search engines due to SEO.
• Faster initial page load - The application had rich features but the initial page load was always fast due to SSR and image optimisation.
• Compatibility with older devices - The application should be able to support a variety of devices from a non IT related domain.

References

• https://www.heavy.ai/technical-glossary/server-side-rendering
• https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/
• https://nextjs.org/docs/basic-features/pages#server-side-rendering
• https://nuxtjs.org/docs/concepts/server-side-rendering/
• https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/
• https://angular.io/guide/universal
• https://snipcart.com/blog/next-js-vs-react
• https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props