I'm currently working with Next.js and using the fetch method to retrieve data:

const res = await fetch(`${process.env.url}/test`, {
  cache: 'no-store',
})

As I understand it, specifying cache: 'no-store' should force a new data fetch each time a user loads a page.

This has led me to question whether this option makes the ponent behave more like it's client-side rendered. Usually, when I execute npm run build, Next.js generates static HTML files after fetching data at build time.

However, using cache: 'no-store' appears to cause data to be fetched each time the page is loaded, not at build time. Does this mean that my ponent is essentially behaving as if it were client-side rendered? I would appreciate any clarification on this matter.

async function fetchItems() {
  const res = await fetch(`${process.env.url}/test`, {
    cache: 'no-store',
  })

  const items: Item[] = await res.json()
  return items
}

export const ItemList = async () => {
  const items = await fetchItems()
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.title}
        </li>
      ))}
    </ul>
  )
}

I'm currently working with Next.js and using the fetch method to retrieve data:

const res = await fetch(`${process.env.url}/test`, {
  cache: 'no-store',
})

As I understand it, specifying cache: 'no-store' should force a new data fetch each time a user loads a page.

This has led me to question whether this option makes the ponent behave more like it's client-side rendered. Usually, when I execute npm run build, Next.js generates static HTML files after fetching data at build time.

However, using cache: 'no-store' appears to cause data to be fetched each time the page is loaded, not at build time. Does this mean that my ponent is essentially behaving as if it were client-side rendered? I would appreciate any clarification on this matter.

async function fetchItems() {
  const res = await fetch(`${process.env.url}/test`, {
    cache: 'no-store',
  })

  const items: Item[] = await res.json()
  return items
}

export const ItemList = async () => {
  const items = await fetchItems()
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.title}
        </li>
      ))}
    </ul>
  )
}

• javascript
• node.js
• reactjs
• next.js

Share Improve this question Follow edited May 24, 2023 at 6:29 Youssouf Oumar 46.7k1616 gold badges103103 silver badges105105 bronze badges asked May 23, 2023 at 14:26 shinyatkshinyatk 1,06533 gold badges1818 silver badges3434 bronze badges 1

• When used like in your example you are basically telling the ponent to replicate the behavior seen in getServerSideProps where the ponent will request the API each time if the request is not cached. – Fabio Nettis Commented May 23, 2023 at 14:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

When you add cache: 'no-store' as an option to fetch, it means disabling Static Rendering (generating HTML files at build time, caching them, and sending them when there is a request) and using Dynamic Rendering (generating HTML files after there is a request and sending them).

The ponent still fetchs data and renders on the server, so no, it's not like making a call client side in a useEffect, in which case, the part that depends on the fetched data will not be in the initial HTML the server sends.

if it was behaving as if it were client-side rendered, you would not have async ponent.

async function fetchItems() {}

async ponent works only on server. no-store makes it like getServerSideProps. by default next.js caches fetched data, if you were fetching a user from the database, you would always get the initial user.