Как не рендерить компонент до получения результатов запроса?

Question

React компонент получает id товара, в пропсах, отправляет запрос, рисует пустую страницу, получает данные о товаре с бэка и отрисовывает его.

Проблема в том, что у меня react с ssr, и для seo нужно, что бы на клиент приходила не пустая страница, а страница с уже отрисованым товаром. А ssr устроен так, что он рисует компонент только один раз, и не перерисовывает его ожидая результатов асинхронного кода.

Как быть? Как заставить react не рисовать компонент сразу, а дождаться результатов запроса, что бы отрисовать на сервере полноценную страницу товара и отдать пользователю?

Answer 1

помоему можно решить эту проблему через lazy и suspense

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Загрузка...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

БЛОГ НА HUSL

Как не рендерить компонент до получения результатов запроса?

Ответы (1 шт):