Data fetching in Next.js 9.3+

• getServerSideProps: Fetch data on each request (server-side rendering).
• getStaticPaths: Specify dynamic routes to pre-render based on data.
• getStaticProps: Fetch data at build time.

Prerequisites

getServerSideProps (server-side rendering)

const Page: NextPage<PageProps> = ({ data }) => {
  // render data...
};

// this function gets called on each request to this page on server-side
export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await fetch("https://www.example.com/posts");
  const data = await res.json();

  return {
    props: {
      data, // will be passed to the page component as props
    },
  };
};

getStaticProps (static generation)

const Page: NextPage<PageProps> = ({ data }) => {
  // render data...
};

// this function gets called at build time on server-side
export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch("https://www.example.com/posts");
  const data = await res.json();

  return {
    props: {
      data, // will be passed to the page component as props
    },
  };
};

• The data required to render the page is available at build time ahead of a user's request.
• The data can be publicly cached (not user-specific).
• The page must be pre-rendered for SEO purpose.

getStaticPaths (static generation)

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch("https://www.example.com/posts");
  const data = await res.json();

  return {
    fallback: true,
    paths: data.map((post) => `/p/${post.slug}`),
  };
};

Conclusion