Data fetching in NextJS

Data fetching can be done in below ways.
  • Client Side - use fetch api in useEffect or SWR library
  • getServerSideProps - pre-render this page on each request
  • getStaticProps - (Static Site Generation - SSG) - pre-render this page at build time
  • getStaticPaths - Used for pages with dynamic routing

export async function getServerSideProps(context) {
  return {
    props: {}, // props to be passed to page component at request time
  }
}


export async function getStaticProps(context) {
    return {
      props: {}, // props to be passed to page component at build time
    }
  }
Complex problems, Simple Solutions