Как оптимизирован этот выбор на сайте реакции Гэтсби?

Question

На первой странице веб-сайта, обслуживаемого установкой Gatsby React, у меня есть компонент NavbarExtra, который отображает некоторые данные через API. Данные, поступающие с этой конечной точки, меняются несколько раз в день.

Теперь идея состоит в том, чтобы оптимизировать выборку таким образом, чтобы выборка производилась как можно реже, чтобы api использовался как можно ближе к концу, он имеет ограничение к нему (разные платные планы).

Сценарий должен состоять в том, что, пока пользователь зашел на сайт, выборка будет происходить только сразу. Тогда пользователь может go вокруг сайта, возможно, даже закрыть компонент с извлечением и снова go вернуться на главную страницу, где производится извлечение.

Теперь компонент вызывается в navmenu, если пользователь только на первой странице: {isLandingPage && <NavBarData/>} и в этом компоненте есть этот выбор:

useEffect(() => {
    fetch(
      'https://endpoint',
      {
        method: 'GET',
        headers: {
        },
      }
    )
      .then(response => {
        if (response.status >= 200 && response.status <= 299) {
          return response.json();
        }
        throw Error(response.statusText);
      })
      .then(data => {
        const { result } = data.quoteResponse;
        setNumbers(result));
      })
      .catch(error => {
        console.log(error);
      });
  }, 0);

Во-первых, я хотел бы спросить, как сделать этот выбор, чтобы api использовался как задний насколько это возможно, чтобы пользователь получал последние данные и получал их снова, например, при перезагрузке страницы?

Во-вторых, я понимаю некоторые понятия об одностраничных приложениях и генераторах сайтов stati c, поскольку здесь используется Gatsby, и, вероятно, правильно понял, что если бы я хотел использовать извлеченные данные на разных страницах (даже на других страницах, кроме isLandingPage) веб-сайта, я мог бы просто использовать его в одном компоненте, который обслуживается на разных страницах, и он не будет повторно загружаться на каждая страница вводится?

Answer 1

Вы можете создать Parent компонент, который fetches данных и может получить data для дочерних элементов, так что вы можете управлять выборкой только в одном компоненте только один раз в каждом сеансе или там, где вам это нужно. В этом случае, в зависимости от вашей архитектуры, вы можете использовать простой state или context API для повторного использования этих данных в нескольких и вложенных компонентах.

Другое решение может включать использование localStorage, поэтому вы можете сохранить данные, извлеченные на localStorage, и повторно использовать эти данные на любом компоненте, вам просто нужно будет обновить данные, когда вам это нужно.