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.

/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.

/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.

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

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.