@loadable/componet 未在服务器端渲染上加载

Question

The loadable component on SSR not rendering on the server but works fine on the client-side. In my main container header and footer is rendering on server only component with loadable is not loading on server

react version

"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"

server.js

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

Client.js

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

Webpack plugin also added. stats.json file is created with chunk hash values. What am I doing wrong here?

Answer 1

For Loadable ready components, inside your App components, you can wrap your required component with Providers of your own choice:

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

For Chunks:

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()