Increasing Next.js app performance with GetServerSideProps and Next/Image

ziad — Mon, 26 Jul 2021 13:46:17 +0000

I was developing an app using react and next.js and I had to decide on the method I will be fetching my data in so I had two options to render my data

Using Axios and fetching the data on the client
Using the prebuilt function GetServerSideProps and rendering on the server

So, I decided on doing both and testing the performance using pageSpeed insights.

First, The data I will be fetching is detailed in the interface below written in Typescript

export interface Post {

identifier: string

title: string

body?: string

slug: string

subName: string

username: string

createdAt: string

updatedAt: string

sub?: Sub

mediaLink?: string

bodyPreview?: string

url: string

voteScore?: number

commentCount?: number

userVote?: number

}

Fetching data on the client

First, we will fetch data dynamically using Axios as demonstrated in the code snippet below

const [posts, setPosts] = useState<Post[]>([])

useEffect(() => {Axios.get('/posts').then((res)=>setPosts(res.data)).catch((err) => console.log(err))}, [])

Then I will render elements using the post component

{posts?.map((post)=>(<PostPreview post={post} key={post.identifier}/>))}

The client-side post component will be using the default HTML tag

<img src={mediaLink}/>

The post component

Fetching data on the server

First, I will wrap the Axios function used on the client-side with Next.js built-in function GetServerSideProps

import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {try {

const res = await Axios.get('/post')
return { props: { posts: res.data } }
} catch (err) {

return { props: { error: 'Something went wrong' }}
}}

and in the post component, I will be using Next/Image component instead of

<Image src={mediaLink} width={16} height={16} layout="responsive"/>

but what do they do exactly

GetServerSideProps Fetches data on each request and renders it on the server then sends it to the client

Why Image instead of

because Images using Next/Image are always rendered in such a way as to avoid Cumulative Layout Shift, a Core Web Vital that Google uses in web search ranking, and Automatic Image Optimization according to Next.js

So no that I have two pages one that loads data on the server and one on the client I used PageSpeed insights to test both routes.

Test Results

I analyzed both https://notus-client.vercel.app/ and https://notus-client.vercel.app/serverside

and saw an increase of about 9–14 points on mobile which is the only platform we will focus on because it is the one that benefits most from server-side rendering

As the results show the server-side approach increased the score by about 15% to 20%. which proves that this approach will be better for the app moving forward.

you can run the test if you want on

source code on GitHub: https://github.com/mage1711/Notus-client

Forem: ziad

Increasing Next.js app performance with GetServerSideProps and Next/Image

Fetching data on the client

Fetching data on the server

Test Results