In React we fetch data using useEffect when reloading the page:

useEffect(() => {
  let ignore = false
  const fetchingData = async () => {
    const res = await fetch(<your_path>)
    const data = await res.json()
    if (!ignore) setData(data)
  }; 
  fetchingData()
  return () => { ignore = true }
}, [])

But how can I do this in Next.js? Fetch doesn't fire in getInitialProps when the page reloads.

In React we fetch data using useEffect when reloading the page:

useEffect(() => {
  let ignore = false
  const fetchingData = async () => {
    const res = await fetch(<your_path>)
    const data = await res.json()
    if (!ignore) setData(data)
  }; 
  fetchingData()
  return () => { ignore = true }
}, [])

But how can I do this in Next.js? Fetch doesn't fire in getInitialProps when the page reloads.

• javascript
• html
• reactjs
• fetch
• next.js

Share Improve this question Follow edited Oct 13, 2019 at 19:50 Melchia 24.4k2323 gold badges108108 silver badges129129 bronze badges asked Oct 13, 2019 at 19:35 ArthurArthur 3,52677 gold badges3636 silver badges6666 bronze badges 2

• 1 Your question is my answer, thanks. – Fatemeh Qasemkhani Commented Apr 13, 2020 at 5:23
• @FatemehQasemkhani, my question was based on my inpetence in next.js, later I realized that the problem with axios request in getInitialProps. Glad to help!:) – Arthur Commented Apr 13, 2020 at 8:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

use axios or isomorphic-unfetch. they work both in client and server environments. Fetch API does not exist in the Node.js environment. it. If you still want to use Fetch API in your client-side code, you should use a isomorphic-unfetch. When you are in the browser, it uses the unfetch polyfill. If your code runs in Node.js, it switches to node-fetch.

import "axios" from "axios"

static async getInitialProps(){
    const res=await axios.get('url')//
    const data=res.data
    return {data}
}

UPDATE

In addition to fetch() on the client-side, Next.js polyfills fetch() in the Node.js environment. You can use fetch() in your server code (such as getStaticProps/getServerSideProps) without using polyfills such as isomorphic-unfetch or node-fetch.

https://nextjs/docs/basic-features/supported-browsers-features

In Next.js you usually load data with HTTP requests in getInitialProps then you can use them as props:

const App = props => (
  <Layout>
  {props.data}
    ...
  </Layout>
);

App.getInitialProps = async function() {
  const res = await fetch(<your_path>)
  const data = await res.json()
  return {
   data
  }
};

export default App;