> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/next-js/how-to-fetch-data-in-next.js.md).

# 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.

{% hint style="info" %}
 Check out [SWR](https://swr.vercel.app/) and [React Query](https://react-query.tanstack.com/) for your **client-side** data fetching needs.
{% endhint %}

 Next.js **automatically** injects`fetch`into your environment. So you do not have to worry about installing libraries like`axios` or `Fetch Polyfill`

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

`getStaticProps`  `getStaticPaths`  `getServerSideProps`

{% hint style="warning" %}
You cannot use `getStaticProps`, `getStaticPaths`,`getServerSideProps` in components or client-side data fetching.
{% endhint %}

```jsx
// /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: {}
  }
}
```

```jsx
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.

```jsx
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`

```jsx
// /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.&#x20;

```jsx
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 } }
}
```

{% hint style="info" %}
Use client-side data fetching when you need data at runtime but don't need server-side rendering.
{% endhint %}

{% hint style="info" %}
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.
{% endhint %}

{% hint style="info" %}
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.
{% endhint %}