如何使用 nextJS for SSR 在 React 中防止重复的 api 调用？答案

【问题标题】：How do I prevent duplicate api call in React using nextJS for SSR?如何使用 nextJS for SSR 在 React 中防止重复的 api 调用？
【发布时间】：2020-11-02 17:22:46
【问题描述】：

我有一个我打算在服务器上渲染的产品列表页面。因此，我使用 NextJs 的 getInitialProps 获取产品列表并将其传递给组件，然后它就可以工作了。

有一个要求，每当客户端的城市发生变化（从下拉菜单）时，我需要从 API 重新获取更新的产品列表。因此，我在 useEffect 中有这个 API 调用。有点意思。

ProductsWrapper.getInitialProps = async () => {
 // This runs on Server Side
 // fetch list of Products
 const products = await getProducts();
 // update the redux store with products returned from server by dispatching
 return { products };
}

// Products is a redux connected component that listens for Product and City state updates
function Products({ products, city }) {

 // fetch new Products iff city changes
 useEffect( async () => {
   // This runs only on Browser
   const products = await getProducts();
    // update the redux store with products returned from server
 }, [city])
}

问题出在下面的第 3 步，

在服务器上调用 Products API 并将其提供给 Redux。
页面在服务器端构建并发送到客户端。
在客户端，useEffect 运行并再次不必要地调用 API 端点。

第一次在客户端呈现页面时，如何防止这种冗余调用？

好吧，在调用 api 之前，在 useEffect 中检查数据是否存在是行不通的，因为尽管 Redux 存储中存在 Products 数据，但如果城市发生变化，则必须进行 api 调用。

【问题讨论】：

如果没有async，你怎么能使用await？
@Ifaruki 抱歉错过了这是一个错字
你可以在城市变更处理程序中拨打getProducts吗？
@AryanJ-NYC 即使我们这样做，问题仍然会发生，因为根本问题是 1。如果 getInitialProps 和 useEffect 中有相同的网络请求，则必然会发生第二个冗余网络请求因为 useEffect 在客户端运行。你同意吗？
我认为 useEffect 不是处理它的正确方法。当该事件发生时，您需要获取数据。（城市变化）这将解决问题。

标签： reactjs redux react-redux next.js server-side-rendering

【解决方案1】：

冗余调用是由于useEffect 的使用。

名称为getServerSideProps 的更好替代方案可用于此用例。 https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

这确保给定的 fetch 调用仅在服务器上运行。

在此之后，如果您想重新获取下拉列表的更改，您可以在 onChange 再次调用它或路由到不同的 URL（例如 /city/foobar）。

在这两种情况下，客户端不应有任何冗余调用，因为我们没有使用 useEffect 挂钩

【讨论】：