@ loadable / comp onet не загружается при рендеринге на стороне сервера - PullRequest
Новая
       74

@ loadable / comp onet не загружается при рендеринге на стороне сервера

0 голосов
/ 25 февраля 2020

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

реагирует версия 

"react": "^16.12.0" 
"react-router-config": "^1.0.0-beta.4", 
"react-router-dom": "^4.3.0", 
"react-router-redux": "^5.0.0-alpha.9"

сервер. js

<ChunkExtractorManager extractor={extractor}> 
    <Provider store={store}> 
      <StaticRouter location={location} context={context}> 
        <ReduxAsyncConnect routes={routes} /> 
      </StaticRouter> 
    </Provider> 
</ChunkExtractorManager>

Клиент. js

loadableReady(() => { 
         hydrate( 
            <Provider store={store}> 
              <ConnectedRouter history={history}> 
                <ReduxAsyncConnect routes={routes} /> 
              </ConnectedRouter> 
            </Provider>, document.getElementById('app') ); 
})

Также добавлен плагин Webpack. stats. json файл создается с чан ха sh значениями. Что я здесь не так делаю?

1 Ответ

0 голосов
/ 25 февраля 2020

Для загружаемых готовых компонентов внутри компонентов приложения вы можете обернуть необходимый компонент с выбранными вами провайдерами: 

import { loadableReady } from '@loadable/component'
loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root)
})

Для блоков: 

import { renderToString } from 'react-dom/server'
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile })
const html = renderToString(
  <ChunkExtractorManager extractor={extractor}>
    <YourApp />
  </ChunkExtractorManager>,
)
const scriptTags = extractor.getScriptTags()
...