Speed Up Your Website: 3 Pro Tips with GetStaticProps and GetServerSideProps

Author

What is getstaticprops and when is it used?

Getstaticprops are used for static site generation as well as for incremental static rendering. Both methods are great for fast performance and good SEO.

The HTML for static pages is generated during build time. Static generation is the fastest and most preferred method to render a page if you do not expect the page to update at all (or very infrequently). Some pages might almost never really update (e.g. About-Us, Privacy Policy) and you can just deploy your site again so that it reflects the change. For an example of a static site generation, you can refer to the playground.

In getstaticprops method, you simply define the requests to the API endpoints you wish to make. For static pages, you can make requests to multiple external API. Only the initial load will be slow, subsequent requests to the page will be fast. The page component that is returned is defined in NextPage.

https://playground.seomastered.co/rendering/singlePage/static.

import React from 'react'
import { GetStaticProps, NextPage } from "next";
import { getCoffeeDescription } from '@/api/api';
import { sleep } from '@/utils/index'
import sleepingTime from '@/common/constants'

interface IProps {
	coffee: string;
}

const IStaticPage: NextPage<IProps> = props => {

	const { coffee } = props;

	return (
		<div>
			<h1>Static</h1>
			<p>This page is build during build time.</p>
			<pre>{coffee}</pre>
		</div>
	)
}


export const getStaticProps: GetStaticProps = async ctx => {

         // Data is fetched during build and the HTML is cached.

	const coffeeDescription = await getCoffeeDescription();
	const coffeeDescriptionText = JSON.stringify(coffeeDescription, null, 2)
	await sleep(sleepingTime);

	return {
		props: {
			coffee: coffeeDescriptionText
		},
	}
}

export default IStaticPage

Incremental Static Rendering (ISR):

In case your pages might need to update the static content (e.g. every 20 minutes) after the deployment, you can use Incremental Static Rendering (ISR). ISR pages are pre-rendered pages that become static once a user visits them.

You can specify after what interval the page is rebuilt (i.e. by specifying revalidate: 10). The disadvantage of ISR is that upon a new deployment, the very first request to this page is going to be slow. Once the page is built, it’s saved in the cache. All later requests to this page will be as fast as a request to a static page. A

After the revalidation period, the cache is invalidated and the page is rebuilt. The page speed of the user is not affected by this. In a way, ISR is static site generation with pre rendering (i.e. caching of the site content for some time).

For a real-world example, please refer to https://playground.seomastered.co/rendering/singlePage/isr

import React from 'react'
import { GetStaticProps, NextPage } from "next";
import { getCoffeeDescription } from '@/api/api';
import { sleep } from '@/utils/index'
import sleepingTime from '@/common/constants'

interface IProps {
	coffee: string;
}

const ISRpage: NextPage<IProps> = props => {

	const { coffee } = props;

	return (
		<div>
			<h1>ISR</h1>
			<p>This page turns into a static page and is regenerated every N seconds.</p>
			<pre>{coffee}</pre>
		</div>
	)
}


export async function getStaticProps() => {

	const coffeeDescription = await getCoffeeDescription();
	const coffeeDescriptionText = JSON.stringify(coffeeDescription, null, 2)
	await sleep(sleepingTime);

	return {
		props: {
			coffee: coffeeDescriptionText
		},
		revalidate: 60 * 60 // Regenerate this page every hour.
	}
}


export default ISRpage

ISR comes in handy in the following situations.

1.) If you run a large website and you want to have all pages statically generated. At the time of writing, Vercel build times out after 45 minutes of the building. You have to choose which pages you want to render statically and which pages are not. For example, you run a large e-commerce website.

2.) You would like the static page to be updated once in a while (e.g. every 10 minutes). This could be because new, fresh data is present. Specify the revalidate time and the site will be rebuilt.

GetStaticProps with GetStaticPaths

During static site generation, you can specify which URLs should be generated statically. getStaticPaths let’s you define which paths you want to statically generate.

export async function getStaticPaths() {
  return {
    paths: ['/slug1/', '/slug2/'],
    fallback: false, // can also be true or 'blocking'
  }
}

What is getServerSideProps?

Server Side Generation (SSG) – HTML generation during run time

The HTML is generated during run time. The HTML is generated when the user loads the page. You fetch data every time a user visits the page (even if it’s the same page that was visited before).

A possible scenario of server-side rendered websites is a stock analysis website. Likely, you want the stock price to be real-time and not show a cached version from 10 minutes ago. SSR and CSR can be used for internal company dashboards. For these sites, search engine optimisation does not matter and it is more important to have real-time data compared to having a very fast loading time. SSR is also important after a user has logged in to a member’s area of a website (e.g. you log into your banking app) He will see unique data pertaining to his account and there is realistically no way to pre-render this site.

For a real-world example, please refer to https://playground.seomastered.co/rendering/singlePage/ssg

import React from 'react'
import { NextPage } from "next";
import { getCoffeeDescription } from '@/api/api';
import { sleep } from '@/utils/index'
import sleepingTime from '@/common/constants'

interface IProps {
	coffee: string;
}

const Page: NextPage<IProps> = props => {

	const { coffee } = props;

	return (
		<>
			<div>
				<h1>SSG</h1>
				<p>Builds the HTML upon request.</p>
				<pre>{coffee}</pre>
			</div>
		</>
	)
}

export async function getServerSideProps() {
	const coffeeDescription = await getCoffeeDescription();
	const coffeeDescriptionText = JSON.stringify(coffeeDescription, null, 2)
	await sleep(sleepingTime);

	return {
		props: {
			coffee: coffeeDescriptionText
		}
	}

}


export default Page

Rapid fire questions

What is the difference between getstaticprops and getserversideprops?

getstaticprops is used to build static (or incremental static generated) pages. getstaticprops is called once and then a cached version to the HTML page is served to the user. Getserverside props are called every time a user requests the page.

When to use getstaticprops vs getserversideprops?

When you want to be a fast loading website which is SEO compliant, you can use getstaticprops to ensure the site is static. If you need to request real-time data the moment the user visits a page, you use getserversideprops.

Can i use both getserversideprops and getstaticprops?

Yes, large websites use a combination of rendering methods for different parts of their website. For the initial load of a page, you cannot combine both methods.

getinitialprops vs getstaticprops?

GetInitialProps was essentially replaced by GetStaticProps with Next.JS 9.3

What is getStaticPaths in getStaticProps?

During static site generation, you can specify which URLs should be generated statically. getStaticPaths lets you define which paths you want to statically generate.

Can I use getstaticprops without getStaticPaths?

Yes, that is possible. None of your URLs will be built statically though then.