Next.js & Data Fetching with getStaticProps: A Beginner’s Guide

Written by

learnmodernwebdevelopment

in

In the world of web development, creating fast and efficient websites is a constant pursuit. Search engines and users alike favor websites that load quickly and provide a smooth user experience. Next.js, a powerful React framework, offers several ways to achieve this, and one of the most important is through data fetching. This tutorial will focus on getStaticProps, a function that allows you to fetch data at build time, optimizing your Next.js application for speed and SEO.

Why Data Fetching Matters

Before diving into the specifics of getStaticProps, let’s understand why data fetching is crucial. Traditional client-side rendering (CSR), where the browser fetches data after the initial HTML is loaded, can lead to slow initial load times and poor SEO. Search engine crawlers might not execute JavaScript, making it difficult for them to index your content. Server-side rendering (SSR), where the server renders the HTML with data, improves SEO and initial load times but can be resource-intensive.

getStaticProps provides a middle ground, enabling static site generation (SSG). This means your pages are pre-rendered at build time, including the data fetched by getStaticProps. The result is blazing-fast load times, excellent SEO, and reduced server load. This is perfect for content that doesn’t change frequently, such as blog posts, documentation, or product catalogs.

Understanding getStaticProps

getStaticProps is a Next.js function that you export from a page component. It runs on the server at build time and allows you to fetch data from any source – an API, a database, a local file, etc. – and pass it as props to your page component. The generated HTML is then statically served to the user.

Here’s a basic example:

// pages/blog/[slug].js

export async function getStaticProps(context) {
  const { params } = context;
  const slug = params.slug;

  // Simulate fetching data from an API
  const post = {
    title: `Post ${slug}`,
    content: 'This is the content of the post.',
  };

  return {
    props: {
      post,
    },
  };
}

export function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export async function getStaticPaths() {
    return {
        paths: [
            {
                params: { slug: '1' },
            },
            {
                params: { slug: '2' },
            },
        ],
        fallback: false,
    };
}

Let’s break down this example:

  • getStaticProps: This is the core function. It receives a context object, which contains information about the request, such as the route parameters.
  • context.params: Provides access to the dynamic route parameters. In this case, we’re using [slug].js, so params.slug will give us the value of the slug parameter in the URL (e.g., ‘1’ or ‘2’).
  • Fetching Data: Inside getStaticProps, you fetch your data. This could involve making an API call using fetch, querying a database, or reading a local file. In this example, we’re simulating data with a hardcoded object.
  • Returning Props: getStaticProps must return an object with a props property. This props object contains the data you want to pass to your page component.
  • Page Component (Post): This component receives the data from getStaticProps as props and renders the content.
  • getStaticPaths: This is crucial for dynamic routes (like /blog/[slug]). It tells Next.js which paths to pre-render at build time. It returns an object with paths (an array of path objects, each with a params property) and fallback. fallback: false means that any path not specified in paths will result in a 404 error. If set to true, Next.js will generate the page on the first request and cache it for future requests. If set to 'blocking', Next.js will wait for the page to be generated before responding to the request.

Setting Up Your Project

Let’s create a simple Next.js project to illustrate the use of getStaticProps. If you haven’t already, make sure you have Node.js and npm (or yarn) installed. Then, follow these steps:

  1. Create a Next.js App: Open your terminal and run the following command to create a new Next.js project: 
    npx create-next-app my-static-blog

    Replace my-static-blog with your desired project name.

  2. Navigate to your project directory: 
    cd my-static-blog
  3. Install any necessary dependencies: For this example, we won’t need any additional dependencies, but you might need to install libraries for API calls or database interaction in a real-world project.
  4. Create a blog post page: Create a new file inside the pages directory named blog/[slug].js. This will be our dynamic route for individual blog posts.

Now, let’s implement the code from the first example within this file, modifying it to fetch data from a simulated API. We’ll create a simple function to simulate fetching a blog post by its slug.

// pages/blog/[slug].js

async function getBlogPost(slug) {
  // Simulate fetching data from an API
  const posts = [
    {
      slug: 'hello-world',
      title: 'Hello World!',
      content: 'This is the content of the first blog post.',
    },
    {
      slug: 'nextjs-data-fetching',
      title: 'Next.js Data Fetching with getStaticProps',
      content: 'This blog post explains how to use getStaticProps.',
    },
  ];

  const post = posts.find((post) => post.slug === slug);

  return post;
}

export async function getStaticProps(context) {
  const { params } = context;
  const slug = params.slug;

  const post = await getBlogPost(slug);

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
  };
}

export function Post({ post }) {
  if (!post) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // Simulate available slugs
  const posts = [
    { slug: 'hello-world' },
    { slug: 'nextjs-data-fetching' },
  ];

  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: false,
  };
}

In this enhanced example:

  • getBlogPost(slug): This function simulates fetching a blog post from an API or database. In a real application, you would replace this with a call to your actual data source.
  • getStaticProps now calls getBlogPost to retrieve the post data.
  • Error Handling: We added a check to see if the post was found. If not, we return notFound: true, which tells Next.js to render a 404 page.
  • Loading State: The Post component now includes a loading state to display something while the data is being fetched (though in this case, it’s fetched at build time, so it’s nearly instantaneous).
  • getStaticPaths is updated to reflect the available blog post slugs.

Common Mistakes and How to Fix Them

While getStaticProps is powerful, several common mistakes can trip up developers. Here are some of them, along with solutions:

1. Not Returning the Correct Props Object

getStaticProps must return an object with a props property. If you forget this, your component won’t receive the data, and you’ll likely see errors. Make sure your return statement is structured correctly:

// Incorrect
export async function getStaticProps() {
  const data = await fetchData();
  return data; // Incorrect: Missing the 'props' wrapper
}

// Correct
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: {
      data,
    },
  };
}

2. Fetching Data on the Client-Side (Inside the Component)

The whole point of getStaticProps is to fetch data at build time. If you’re making API calls or database queries inside your component (e.g., using useEffect), you’re defeating the purpose of SSG. This will slow down the initial load time and hurt SEO. Always fetch data inside getStaticProps (or getStaticPaths for dynamic routes) when possible.

Example of Incorrect Client-Side Data Fetching:

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      setData(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

Solution: Move the data fetching to getStaticProps:

export async function getStaticProps() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return {
    props: {
      data,
    },
  };
}

function MyComponent({ data }) {
  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

3. Forgetting getStaticPaths for Dynamic Routes

If you’re using dynamic routes (e.g., /blog/[slug].js), you must implement getStaticPaths to tell Next.js which paths to pre-render. If you omit this, you’ll encounter a build-time error.

Example of Missing getStaticPaths:

// pages/blog/[slug].js - Incorrect (Missing getStaticPaths)

export async function getStaticProps(context) {
  const { params } = context;
  const slug = params.slug;
  // ... fetch data based on slug
}

function BlogPost({ post }) {
  // ... render the post
}

Solution: Implement getStaticPaths:

// pages/blog/[slug].js - Correct

export async function getStaticPaths() {
  // Fetch all possible slugs from your data source
  const posts = await getAllPosts(); // Replace with your data fetching logic
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: false, // or 'blocking' or true, depending on your needs
  };
}

export async function getStaticProps(context) {
  const { params } = context;
  const slug = params.slug;
  // ... fetch data based on slug
}

function BlogPost({ post }) {
  // ... render the post
}

4. Incorrectly Handling the fallback Option

The fallback option in getStaticPaths is critical for handling dynamic routes. It dictates how Next.js should behave for paths that aren’t pre-rendered at build time.

  • fallback: false: Any path not returned by getStaticPaths will result in a 404 error.
  • fallback: true: Next.js will generate the page on the first request and cache it for future requests. While the page is being generated, it will show a fallback UI (e.g., a loading indicator).
  • fallback: 'blocking': Next.js will wait for the page to be generated before responding to the request. This provides a better user experience than fallback: true, as the user won’t see a loading state, but it can increase the initial response time for the first request to a new path.

Choosing the correct fallback strategy depends on your application’s needs. If you have a large number of dynamic routes and don’t want to pre-render all of them at build time, fallback: true or fallback: 'blocking' might be a good choice. However, be aware of the potential for slower initial load times for new paths.

5. Not Optimizing for Large Datasets

If you’re dealing with a large amount of data, pre-rendering all pages at build time with getStaticProps can significantly increase build times. Consider these optimizations:

  • Pagination: Instead of pre-rendering all items, use pagination to pre-render only the first few pages and let the client-side fetch subsequent pages.
  • Incremental Static Regeneration (ISR): Use ISR (with getStaticProps and the revalidate option) to update your pages periodically. This allows you to keep your content fresh without rebuilding the entire site every time. We’ll cover ISR in more detail later in this tutorial.
  • Limit the Data: Fetch only the necessary data for each page. Don’t fetch all the data for all items at once if you only need a subset for the current page.

Step-by-Step Instructions: Building a Blog with getStaticProps

Let’s build a simple blog using getStaticProps to solidify your understanding. We’ll fetch blog post data from a simulated API and display it on individual post pages and a list of posts on the home page.

  1. Set up your Next.js project (as described earlier in the “Setting Up Your Project” section).
  2. Create a data source: For simplicity, we’ll simulate a blog post API using a JavaScript array. Create a file called data.js in your project root and add the following code:
// data.js

export const posts = [
  {
    slug: 'hello-world',
    title: 'Hello World!',
    content: 'This is the content of the first blog post.',
    date: '2024-01-26',
  },
  {
    slug: 'nextjs-data-fetching',
    title: 'Next.js Data Fetching with getStaticProps',
    content: 'This blog post explains how to use getStaticProps.',
    date: '2024-01-27',
  },
  {
    slug: 'isr-example',
    title: 'ISR Example with Next.js',
    content: 'Demonstrating Incremental Static Regeneration.',
    date: '2024-01-28',
  },
];
  1. Create a function to fetch a single post: In data.js, add a function to retrieve a single post by its slug: 
    // data.js

export function getPostBySlug(slug) {
  return posts.find((post) => post.slug === slug);
}
  2. Create a function to get all posts: In data.js, create a function to retrieve all posts: 
    // data.js

export function getAllPosts() {
  return posts;
}
  3. Create the blog post page (pages/blog/[slug].js): This is where the magic of getStaticProps happens. Implement the following code: 
    // pages/blog/[slug].js
import { getPostBySlug, getAllPosts } from '../../data';

export async function getStaticProps({ params }) {
  const { slug } = params;
  const post = getPostBySlug(slug);

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  const posts = getAllPosts();
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: false,
  };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <p>{post.content}</p>
    </div>
  );
}

    This code:

    • Imports the getPostBySlug and getAllPosts functions from data.js.
    • Uses getStaticProps to fetch the blog post data based on the slug.
    • Uses getStaticPaths to pre-render the pages for each blog post.
    • Renders the blog post content.
  4. Create the index page (pages/index.js): This page will display a list of all blog posts. Implement the following code: 
    // pages/index.js
import { getAllPosts } from '../data';
import Link from 'next/link';

export async function getStaticProps() {
  const posts = getAllPosts();
  return {
    props: {
      posts,
    },
  };
}

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

    This code:

    • Imports the getAllPosts function from data.js.
    • Uses getStaticProps to fetch all blog posts.
    • Renders a list of links to each blog post page.
  5. Run your application: In your terminal, run npm run dev or yarn dev. Open your browser and navigate to http://localhost:3000. You should see the list of blog posts on the home page. Click on a blog post title to view the individual post page.

This example demonstrates a basic blog implementation using getStaticProps. You can extend this by adding features such as:

  • Rich text formatting (using Markdown or a rich text editor).
  • More sophisticated data fetching (from a database or a headless CMS).
  • Styling with CSS-in-JS, CSS Modules, or a CSS framework like Tailwind CSS.
  • Comments and social sharing.

Incremental Static Regeneration (ISR)

While getStaticProps is excellent for content that rarely changes, what if your content is updated more frequently? Rebuilding your entire site every time a small change is made can be inefficient. This is where Incremental Static Regeneration (ISR) comes in handy. ISR allows you to update your statically generated pages without having to rebuild the entire site.

ISR works by using the revalidate option within getStaticProps. This option specifies the time (in seconds) after which a page will be re-generated. When a user visits a page that has expired, Next.js will:

  • Serve the cached version of the page immediately (so the user doesn’t experience any downtime).
  • In the background, re-generate the page with the latest data.
  • The next time the page is requested, the updated version will be served.

Let’s modify our blog post page (pages/blog/[slug].js) to use ISR:

// pages/blog/[slug].js
import { getPostBySlug, getAllPosts } from '../../data';

export async function getStaticProps({ params }) {
  const { slug } = params;
  const post = getPostBySlug(slug);

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

export async function getStaticPaths() {
  const posts = getAllPosts();
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: false,
  };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <p>{post.content}</p>
    </div>
  );
}

In this example, we’ve added the revalidate: 60 option. This tells Next.js to re-generate the page every 60 seconds. You can adjust this value based on how frequently your content changes. For example, if your content changes very often, you might set revalidate to 10 or 30 seconds. If it changes less frequently, you might set it to hours or even days.

Key Takeaways

  • getStaticProps is a powerful feature in Next.js for pre-rendering pages at build time.
  • It improves website performance, SEO, and reduces server load.
  • Use it for content that doesn’t change frequently, such as blog posts, documentation, and product catalogs.
  • Remember to return the props object in getStaticProps and implement getStaticPaths for dynamic routes.
  • Use Incremental Static Regeneration (ISR) with the revalidate option to update your pages periodically without rebuilding the entire site.
  • Always fetch data inside getStaticProps to ensure it happens at build time.

FAQ

Here are some frequently asked questions about getStaticProps:

  1. What’s the difference between getStaticProps and getServerSideProps?

    getStaticProps runs at build time, while getServerSideProps runs on the server for each request. getServerSideProps is suitable for pages where data changes frequently and needs to be up-to-date for every user. However, it’s generally slower than getStaticProps because it requires server-side rendering for each request. Use getStaticProps whenever possible for performance and SEO benefits.

  2. When should I use getStaticPaths?

    You need to use getStaticPaths when you’re using dynamic routes (e.g., /blog/[slug].js) and want to pre-render those pages at build time. getStaticPaths tells Next.js which paths to generate. Without getStaticPaths, Next.js won’t know which dynamic pages to build.

  3. Can I use getStaticProps with data from a CMS?

    Yes, absolutely! You can fetch data from any source within getStaticProps, including headless CMS platforms like Contentful, Sanity, or Strapi. The process is the same: use the CMS’s API to fetch the data and pass it as props to your page component.

  4. What are the benefits of using SSG with getStaticProps compared to CSR?

    SSG with getStaticProps offers significant advantages over client-side rendering (CSR):

    • Faster initial load times: Pages are pre-rendered, so the user sees content immediately.
    • Improved SEO: Search engine crawlers can easily index pre-rendered content.
    • Better performance: Reduced server load and faster page rendering.
    • Improved user experience: Users see content quickly, leading to higher engagement.
  5. How do I handle errors in getStaticProps?

    You can handle errors in getStaticProps by returning an object with the notFound: true property to display a 404 page, or you can throw an error and let Next.js handle it (which will also typically result in a 500 error page). You can also use try/catch blocks to gracefully handle potential errors during data fetching and return appropriate error messages or fallback content in your component.

Mastering getStaticProps is a crucial step in building high-performance Next.js applications. By pre-rendering your pages at build time, you can significantly improve your website’s speed, SEO, and overall user experience. Remember to use getStaticPaths for dynamic routes and consider Incremental Static Regeneration (ISR) for content that needs to be updated periodically. With these techniques, you can create fast, efficient, and SEO-friendly websites that deliver a great experience to your users. The power of static site generation, combined with Next.js’s flexibility, opens up exciting possibilities for modern web development, allowing you to create engaging and performant web applications that stand out in the crowded digital landscape. As you continue to explore Next.js, you’ll find that these techniques are fundamental to building a solid foundation for your web projects.

More posts