How to fetch data in Next.js

There are many ways to fetch data with Next.js. Depending on when you need the data and what you're doing with it, you have options.

Next.js allows you to mix and match Static Generation, Server-side Rendering, and Client-side Rendering to have a genuinely hybrid app.

You can continue to fetch the data client-side to react the same way you do in React.js: hooks, fetch, etc.

Check out SWR and React Query for your client-side data fetching needs.

Next.js automatically injectsfetchinto your environment. So you do not have to worry about installing libraries likeaxios or Fetch Polyfill

For fetching data ahead of time (for prerendering Pages only) we have:

getStaticProps getStaticPaths getServerSideProps

You cannot use getStaticProps, getStaticPaths,getServerSideProps in components or client-side data fetching.

// /pages/index.js


// The client code
const IndexPage = () => {// jsx }
export default IndexPage


// This function will only ever run on the server. 
// The actual code won't even be bundled with the client code above. 
export async function getStaticProps() {

// you can do some exciting things here
// for example, file system work or connect to a DB

  return {
    props: {}
  }
}

export default ({ content }) => <div>{content.title}</div>;

export function getStaticProps() {
  // get data from CMS

  return {
    props: {
      content: {
        title: "This is my really nice app",
      },
    },
  };
}

The results of this function are saved into a JSON file and passed as props to the client's component at runtime.

Incremental Static Regeneration revalidate: 1 allows you to update existing pages by re-rendering them in the background as traffic comes in.

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}

export default Blog

Now the list of blog posts will be revalidated once per second; if you add a new blog post it will be available almost immediately, without having to re-build your app or make a new deployment.

getStaticProps with params

Use getStaticPaths to return the value of the params

// /pages/blog/:slug.js

const IndexPage = () => {// jsx }
export default IndexPage

export async function getStaticPaths() {
  // get all the paths for your posts from an API
  // or file system
  const results = await fetch('/api/posts')
  const posts = await results.json()
  const paths = posts.map(post => ({params: {slug: 
  post.slug}}))
  /*
  [
    {params: {slug: 'get-started-with-node'}},
    {params: {slug: 'top-frameworks'}}
  ]
  */
  return {paths}
}

export async function getStaticProps({ params }) {
  const res = await fetch(`/api/post/${params.slug}`)
  const post = await res.json()
  return {
    props: {post}
  }
}

Use fallback: true on your return object for getStaticPaths if you have a big site and don't want to statically prerender all items at once, and instead opt in to render some later at runtime via server-side rendering.

getServerSideProp

getServerSideProps will be called at runtime during every request.

const IndexPage = () => {// jsx }
export default IndexPage

export async function getServerSideProps() {
  const response = await fetch(`https://somedata.com`)
  const data = await response.json()

  return { props: { data } }
}

Use client-side data fetching when you need data at runtime but don't need server-side rendering.

Use getServerSideProps when you need data at runtime but do need server-side rendering.

Don't use getServerSideProps unless necessary. Because it computes on every request, it can be slow.

Use getStaticProps if you have pages that rely on data that is cachable and accessible at build time.

Use getStaticProps and getStaticPaths if you have pages that rely on data that is cachable and accessible at build time but the pages have dynamic URL params.