Next.js Data Fetching Methods

Next.js data-fetching methods define when data is loaded to balance performance and SEO.

Data can be fetched at build time, request time, or on the client.
Methods control data freshness and rendering strategy.
Optimizes performance based on content type.

Methods for Data Fetching

Given below are some data fetching methods used in Next.js to handle data at build time, request time, or on the client side:

1. getStaticProps

It fetches and pre-renders all required data at build time, caching the content for fast delivery and improved SEO. This method is the default in Next.js and is used for Static Site Generation (SSG) and Incremental Static Regeneration (ISR).

Properties of getStaticProps:

It can only be exported from the page file, not the component file.
It only runs on build time.
It runs on every subsequent request in development mode.
Its code is completely excluded from the client-side bundle.

2. getStaticPaths

If a page uses getStaticProps and has dynamic routes, it must declare a list of paths that will be statically generated. Next.js will statically pre-render all the paths defined by getStaticPaths when we export a function named getStaticPaths from a page.

Properties of getStaticPaths:

It can only be exported from a page file.
It is meant for dynamic routes.
Page must also implement getStaticProps.
It runs only at build time in production.
It runs on every request in development mode.

3. getServerSideProps

getServerSideProps is a Next.js data-fetching method used for Server-Side Rendering, where data is fetched and the page is rendered on every request to ensure fresh and dynamic content.

Properties of getServerSideProps:

It runs on every subsequent request in development as well as production mode.
Its code is excluded from the client-side bundle.
It can only be exported from page file.

When to Use Each Data Fetching Method

Use getStaticProps when page content is static or changes infrequently, as pages are generated at build time for better performance.
Use getStaticPaths along with getStaticProps for pages with dynamic routes that need to be statically generated.
Use getServerSideProps when data changes frequently and must be fetched fresh on every request.

Example: A Next.js application featuring albums, posts, and dynamically routed users pages, each demonstrating different data-fetching strategies using the JSONPlaceholder API.

Run the following command to create a new Next.js application (Make sure you have NPM and node installed)

npx create-next-app@latest myproject

Open the project in a code editor and review the basic structure.
Focus only on the /pages directory for this tutorial.
Clean up the /pages/index.js file.
Create new pages: albums, posts, and a dynamic route users/[id].

Project Structure

/pages/index.js - Clean up the homepage (index) by removing boilerplate code and adding navigation links to all implemented pages.

JavaScript

import React from 'react'
import Link from 'next/link'
const Home = () => {

    // This is the home page which will
    // contain links to all other pages
    return (
        <>
            <h1>Hello Geeks</h1>
            <ul>
                <li>
                    getStaticProps : 
                    <Link href={'/about'}>About Page</Link>
                </li>
                <li>
                    getStaticPaths : 
                    <Link href={'/users/1'}>User 1</Link>
                </li>
                <li>
                    getServerSideProps : 
                    <Link href={'/posts'}>Posts Page</Link>
                </li>
            </ul>
        </>
    )
}

export default Home

/pages/albums.jsx - Albums page will implement static site generation using getStaticProps, we will export the data fetching method along with the page component. We can send fetched data to the page component using props. Next Js will fetch all the albums at build time before the user's request.

JavaScript

import React from 'react'

export const getStaticProps = async () => {

    // Fetching data from jsonplaceholder.
    const res = await fetch(
        'https://jsonplaceholder.typicode.com/albums');
    let allAlbums = await res.json();

    // Sending fetched data to the page component via props.
    return {
        props: {
            allAlbums: allAlbums.map((album) => album.title)
        }
    }
}

const Albums = ({ allAlbums }) => {
    return (
        <div>
            <h1>All Albums</h1>
            {allAlbums.map((album, idx) => (
                <div key={idx}>{album}</div>))
            }
        </div>
    )
}

export default Albums

/pages/posts.jsx - The Posts page uses Server-Side Rendering with getServerSideProps, fetching data on every user request and passing it to the page component via props.

JavaScript

import React from 'react'

export const getServerSideProps = async (ctx) => {

    // ctx is the context object which contains the request,
    // response and props passed to the page.

    // fetching data from jsonplaceholder.
    const res = await fetch(
        'https://jsonplaceholder.typicode.com/posts');
    let allPosts = await res.json();

    // Sending fetched data to the page component via props.
    return {
        props: {
            allPosts: allPosts.map((post) => post.title)
        }
    }
}

const Posts = ({ allPosts }) => {
    return (
        <div>
            <h1>All Posts</h1>
            {allPosts.map((post, idx) => (
                <div key={idx}>{post}</div>))}
        </div>
    )
}

export default Posts

/pages/users/[id].jsx - For this dynamic page, user IDs are pre-defined using getStaticPaths so Next.js can generate pages at build time.

JavaScript

import React from "react";

export const getStaticProps = async (ctx) => {

    // ctx will contain request parameters
    const { params } = ctx;
    
    // We will destructure id from the parameters
    const userId = params.id;
    
    // Fetching user data
    const res = await fetch(
        `https://jsonplaceholder.typicode.com/users/$%7BuserId%7D%60
    );
    const userData = await res.json();

    // Sending data to the page via props
    return {
        props: {
            user: userData,
        },
    };
};

export const getStaticPaths = () => {
    
    // Specifying all the routes to be
    // pre-rendered by next js
    return {
        paths: [
            { params: { id: "1" } },
            { params: { id: "2" } },
            { params: { id: "3" } },
            { params: { id: "4" } },
            { params: { id: "5" } },
            { params: { id: "6" } },
            { params: { id: "7" } },
            { params: { id: "8" } },
            { params: { id: "9" } },
            { params: { id: "10" } },
        ],
        fallback: false,
    };
};

const User = ({ user }) => {
    return (
        <>
            <h1>User {user.id}</h1>
            <h2>Name : {user.name}</h2>
            <h2>Email : {user.email}</h2>
        </>
    );
};

export default User;

Run the application: Open the terminal and enter the following command.

npm run dev

Output:

getStaticProps runs at build time for static pages.
getStaticPaths is used with dynamic routes for static generation.
getServerSideProps runs on every request for fresh data.
All three can only be exported from page files and improve SEO.

Next.js Data Fetching Methods

Methods for Data Fetching

1. getStaticProps

2. getStaticPaths

3. getServerSideProps

When to Use Each Data Fetching Method

Output:

Explore