How server side rendering can improve the SEO performance of your Single Page Application
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,
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.
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.
Disadvantages with Server Side Rendering.
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 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.
Being a lightweight version of React, Next.js offers multiple advantages over React.
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.
We have delivered projects which featured Server Side Rendering with Next.js. This approach had multiple advantages to the applications.