Повторное отображение страницы || реагирующий загружаемый, стилизованный компонент, JSS siteCore - PullRequest
Новая
       33

Повторное отображение страницы || реагирующий загружаемый, стилизованный компонент, JSS siteCore

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

Мы используем SSR и все работает как положено. для фрагментов мы используем react-loadable, однако на стороне клиента, когда фрагменты загружаются ... компонент переключается в состояние загрузки для рендеринга загрузчика.

Это приводит к следующему:

  • Страница отображается с SSR HTML
  • Начинается рендеринг на стороне клиента ... Рендеринг страницы Загрузка HTML
  • Рендерится тот же HTML из # 1 (после chunk загружает)

Как лучше всего отказаться от шага №2 выше? или сделать покупки для повторной отрисовки.

фрагмент кода для сервера . js

renderToStringWithData(
  <StyleSheetManager sheet={sheet.instance}>
    <Loadable.Capture report={module => loadableModules.push(module)}>
       <AppRoot
         path={path}
         Router={StaticRouter}
         graphQLClient={graphQLClient}
         appInsights={client}
       />
     </Loadable.Capture>
   </StyleSheetManager>,
 ),

фрагмент кода для client / index. js

.then(() => Loadable.preloadReady())
  .then(() => {
    // HTML element to place the app into
    const rootElement = document.getElementById('root');

    renderFunction(
      <AppRoot
        path={window.location.pathname}
        Router={BrowserRouter}
        graphQLClient={graphQLClient}
      />,
      rootElement,
    );
  });

Приложение сначала отображается на сервере, затем оно снова отображается на клиенте, как только фрагменты загружены на клиент.

...