Data Fetching in Next.js – Pre-rendering Types

While I was focused on building client-side React applications, Next.js became very popular. I kept hearing good things about it so, I decided to give it a try. Now, I can myself using it in several projects or for my potential future business endeavors.

If it’s your first time too with Next.js or you need a quick go-through of its features, this blog is for you-

Pre-rendering Types in Next.js

Next.js, by-default, pre-renders every page which means without having to go with client-side rendering, it generates HTML for every page in advance. Pre-rendering is preferred because it offers better performance and SEO.

Next.js provides support for Static-Site Generation and Server-Side Rendering, which are both pre-rendering types.

#Server-Side Rendering

The HTML pages are generated on each request which means the website will run over a server that is dependent on code, not static files.

#Static Generation

The HTML pages are generated at build time. Once you’re done with the building; the result is a set of static files. This method is useful because it allows caching the website on CDN and gives better performance.

The interesting thing here is that you can choose which one of the two types you want to use for every page. In fact, you’ll end up creating a ‘hybrid next.js app’ by using static-site generation for most of the pages and server-side rendering for others.

Now, we’ll talk about some functions used for fetching data in these pre-rendering types-

Data Fetching Functions in Next.js

There are three unique functions in next.js for fetching data in pre-rendering –

• getStaticProps()
• getStaticPaths()
• getServerSideProps()

Let’s understand these functions in detail-

getStaticProps() –

It’s an asynchronous function that fetches data at build time which means, we use it in server-side-generation pre-rendering type.

It takes a context as an argument and will return an object with a props field. This props field contains all the props we end up passing down to a page.

Let’s take an example to use getStaticProps() for todos API –

We can use function to:

• Get public data from the cloud function.
• Retrieve data from an API or external endpoint.
• Read a local file.
• Query a database.

Let’s move to another function –

getStaticPaths() –

Next.js gives a wonderful feature of creating statically generated dynamic routes, e.g., /articles/:id.

This is an asynchronous function that returns an object with a path field. There is another field called fallback. When we use fallback setting it as false and the user tries to access path which has not been returned by getStaticPaths, it will throw ‘404 error’.

Let’s see an example where we consider a static product page with a dynamic route –

We can use this function for –

• Displaying a detailed page of an entity such as a product, documentation entry, or blog post.
• Client-side fetching that requires one of the parameters of the path.

getServerSideProps() –

Sometimes static-side generation is not what we need. If we need to fetch data and render dynamic content on the server, then we use getServerSideProps.

This asynchronous function allows us to fetch data and returns an object with a props field that will be passed down to a page. However, the main difference is that it allows the pre-rendering of a page on each request, so we can consider that this is a use case for server-side rendering. This function can fetch some non-static data that is tied to a request.

Let’s take an example to use getServerSideProps() for todos API –

We use this function to:

• Fetch complex data.
• Fetch sensitive data that will not be fetched at build time.
• To prevent creating a bottleneck and decreasing your Time to First Byte.
• Fetch user-related specific data such as permissions or revoked.

Wrap Up:

In this blog, we described how to fetch data in Next.js during the pre-rendering of pages. There are several use-cases of Static-site Generation and Server-side Rendering that I got to learn while working with Next.js. It’s an amazing tool for website building, you all should definitely try it sometime.

If you have any doubts, you can ask your queries in the comment section.

Thanks for reading! You can check out some similar tech blogs here.