时间戳

首页 > 解决方案 > 如何使用 nextJS for SSR 在 React 中防止重复的 api 调用？

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

问题描述

我有一个我打算服务器渲染的产品列表页面。因此，使用 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 步，

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

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

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

标签： reactjsreduxreact-reduxnext.jsserver-side-rendering

解决方案

冗余调用是由于useEffect使用。

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

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

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

在这两种情况下，客户端都不应该有任何多余的调用，因为我们没有使用useEffect钩子

推荐阅读