Как предотвратить дублирование вызова API в React с использованием следующего JS для SSR? - PullRequest
Новая
       109

Как предотвратить дублирование вызова API в React с использованием следующего JS для SSR?

0 голосов
/ 13 июля 2020

У меня есть страница со списком продуктов, которые я собираюсь отображать на сервере. Итак, используя Next Js s getInitialProps , я получаю список продуктов и передаю его компонентам, и он работает.

Существует требование, когда город меняется (из раскрывающегося списка ) на стороне клиента мне нужно повторно получить обновленный список продуктов из API. Следовательно, у меня есть этот вызов API в useEffect . Это в некотором роде идея. 

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. На сервере выполняется вызов API продуктов и передается в Redux.
  2. Страница создается на стороне сервера и отправляется клиенту.
  3. На клиенте запускается useEffect и снова без надобности вызывает конечную точку API.

Как предотвратить этот избыточный вызов при первом отображении страницы на клиенте?

Ну, просто если проверьте внутри useEffect, присутствуют ли данные перед вызовом api, не работает, потому что, несмотря на то, что данные о продуктах присутствуют в магазине Redux, если город изменится, вызов api должен быть выполнен.

1 Ответ

0 голосов
/ 14 июля 2020

Избыточный вызов вызван использованием useEffect.

Для этого варианта использования доступна лучшая альтернатива с именем getServerSideProps. https://nextjs.org/docs/basic-features/data-fetching#getserversideprops - рендеринг на стороне сервера

Это гарантирует, что данный вызов выборки выполняется только на сервере.

После этого, если вы хотите выполнить повторную выборку на изменение раскрывающегося списка, вы можете либо вызвать его снова по номеру onChange, либо перейти на другой URL-адрес (например, /city/foobar).

В обоих случаях не должно быть избыточных вызовов на клиенте, поскольку мы не используйте крючок useEffect

...