# How to fetch data in Next.js

**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 %}