Back to Next JS Course

Next JS offers multiple methods for fetching data, each suited for different scenarios.

Data Fetching Methods

• getStaticProps: Fetches data at build time. Ideal for static generation and when the data does not change frequently.
• getServerSideProps: Fetches data on every request. Suitable for dynamic data that changes frequently.
• getStaticPaths: Used in conjunction with getStaticProps to generate static pages based on dynamic routes.
• Client-Side Data Fetching: Fetches data on the client side using React hooks like useEffect.

getStaticProps

Fetches data at build time for static generation. Ideal for pages with static content that doesn't change frequently.

For example,

// pages/index.js
import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

getServerSideProps

Fetches data on every request. Useful for pages that need to display up-to-date data.

For example,

// pages/index.js
import React from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

getStaticPaths

Generates static paths for dynamic routes. Used in conjunction with getStaticProps for dynamic pages.

For example,

// pages/posts/[id].js
import React from 'react';

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

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

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

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

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default Post;

Client-Side Data Fetching

Fetches data on the client side. Useful for user interactions and when the data needs to be fetched after the initial render.

For example,

// pages/index.js
import React, { useState, useEffect } from 'react';

const Home = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await res.json();
      setPosts(posts);
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

Incremental Static Regeneration (ISR)

Allows you to update static pages after they have been built. Ideal for content that changes frequently but should still benefit from static generation.

For example,

// pages/index.js
import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 10, // Re-generate the page every 10 seconds
  };
}

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;