Question

在React中，我们在重新加载页面时使用useEffect来获取数据：

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 }
}, [])

但是我如何在Next.js中做到这一点？重新加载页面后，getInitialProps中的抓取操作不会触发。

Answer 1

在Next.js中，您通常在getInitialProps中使用HTTP请求加载数据，然后可以将它们用作道具：

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;

Answer 2

使用axios或同构未提取。它们在客户端和服务器环境中均可工作。 Node.js环境中不存在Fetch API。它。如果仍要在客户端代码中使用Fetch API，则应使用isomorphic-unfetch。当您在浏览器中时，它将使用未提取polyfill。如果您的代码在Node.js中运行，它将切换到node-fetch。

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

Nextjs在重新加载页面时获取数据

2 个答案: