开发者问题收集

在 next js 中获取数据

2022-05-18
1627

在 next.js 中,有很多方法可以从 api 获取数据。

getServerSideProps,getStaticPaths,getStaticProps,Incremental Static Regeneration and client side rendering.

如果我必须在任何状态发生变化时向后端发出请求,除了客户端渲染之外,我可以使用其他数据获取方法吗?

我来自 React.js 背景,主要使用客户端渲染。
不同获取方法的具体用例是什么?
我也可以始终在 Next.js 中仅使用客户端渲染吗?

1个回答

服务器端渲染有利于 SEO。您可以检查一下,如果您查看 React 应用的页面源代码,您将不会获得太多 HTML,这是 next.js 修复的问题。使用 getServerSidePropsgetStaticProps ,您可以调用 API(例如 DB 后端)来获取数据并在服务器端渲染页面。现在,当您必须更新页面状态时,您可以像平常一样简单地 fetch ,因为它无关紧要,因为它无论如何都是由某些操作触发的。

Can I always use client side rendering only in next.js also.

是的,您可以,但您希望搜索引擎索引您的网站和/或显示相关数据,例如评论和预览文本,对吗?

If I have to make requests to backend on the change of any state, Can I use other methods of data fetching apart from client side rendering

当状态改变时,您将像通常在 react 中一样获取新信息。

GetServerSidePropsGetStaticProps 仅在用户访问页面(或重新加载等)时运行一次。您可以通过获取和更新状态来获取最新数据。

Next.js 不仅仅是 react,它也可以用作后端,即创建用于将数据保存到数据库、处理身份验证等的 API。解释这一切超出了这个答案的范围。 至于何时使用,您可以在 此处 阅读更多相关信息,或者搜索相关信息,我相信 SO 对此有很多疑问。

一种被迫使用 next.js 功能的情况是当您想要使用未实现 CORS 的旧 API 时,此时您无法控制另一端的开发人员,因此您可以在 next.js 上创建一个 API,然后通过以下方式获取您的 React 代码: /getinfo 。现在在您的后端编写代码来处理这个问题,它会将该第三方 API 的结果委托给您,非常简洁吧

AMunim
2022-05-18