目前,我正在使用Axios在Next.js中开发一个项目,从后端提取数据。我似乎遇到的问题是,由于某种原因,虽然我的页面与服务器端渲染(通过getStaticProps())似乎运行正常,但它们的渲染时间比我预期的要长,我在加载它们时得到了两个错误。
第一个错误是服务器控制台中的通用Axios“请求失败,状态代码为404”。从后端获取的数据将正确地发送到页面。
第二个错误是浏览器控制台中的“加载静态 prop 失败”。
这让我很困惑,因为我不知道我可以在哪里有一个API请求404'ing,并且客户端错误消息没有给予我任何有意义的数据去关闭。
我尝试过的事情:更改检索API URL的方式,添加数据检查并返回{ notFound:如果数据为null/undefined,则返回true },并使用console.log()尝试跟踪失败请求可能来自何处。到目前为止一无所获。
更新:我还尝试显式地声明传递给页面组件的数据的类型,并对我的API URL和返回的数据进行了两次和三次检查,没有任何错误。我还是被难住了。目前这不是一个大问题,因为这似乎不会影响功能,除了页面加载稍微慢一点,但我仍然希望任何帮助解决它!
我的代码:
const Page = ({ results }) => {
const stuff = results.stuff;
...
};
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
const apiURL = `http://localhost:3000/api${req.url}`;
const { data } = await axios.get(apiURL);
if (!data) {
return {
notFound: true,
}
}
return {
props: {
results: data.data,
}
};
};
所有SSR页面都具有相同的getServerSideProps()方法。
1条答案
按热度按时间jfgube3f1#
看来你遇到了两个不同的问题。404错误提示404错误提示您访问的页面不存在再次检查getServerSideProps中的apiURL是否正确。
“无法加载静态 prop ”错误表明Axios返回的数据存在问题。确保它是您所期望的并且可以正确地作为props传递。
最后,考虑更好的错误处理。如果数据为null或undefined,则返回{ notFound:true },这会导致Next.js渲染404页面。您可能希望以不同的方式处理此问题,例如返回错误消息或重定向到另一个页面。
希望这有帮助!