Я пытаюсь создать приложение ssr реагировать с ленивой загрузкой импорта. Все работает нормально, кроме того, что не получает все необходимые куски
Мне также интересно, если это связано с динамическим компонентом, который основан на ответе сервера
enter code here
Редактировать - на самом деле он рендерит все необходимые фрагменты, но стирает все целиком, когда клиентская часть берет верх и рендерит снова
Поскольку он перерисовывает все, он сильно замедляется.
Синтаксический анализатор происходит на стороне сервера, и когда клиентская сторона берет на себя, он получает больше server.js
const history = createHistory({
initialEntries: [urlPath],
})
// const history = createHistory()
const store = configureStore(history, {
location: {
...
},
})
const context = {}
const htmlRoot = (
<Provider store={store}>
<StaticRouter location={urlPath} context={context}>
<AppRoot />
</StaticRouter>
</Provider>
)
// pre fetching data from api
store
.runSaga(rootSaga)
.done.then(() => {
const RTS = renderToString(htmlRoot) + printDrainHydrateMarks()
const head = Helmet.renderStatic()
console.log(printDrainHydrateMarks())
res.status(code).send(renderDom(RTS, port, host, storeState, head))
}
})
.catch(e => {
console.log(e.message)
res.status(500).send(e.message)
})
renderToString(htmlRoot)
console.log(printDrainHydrateMarks())
store.close()
} else {
res.status(500).send(_err)
}
Prod Server
Loadable.preloadAll().then(() => {
app.listen(PROD_PORT, (error) => {
})
});
Клиентская сторона
Loadable.preloadReady().then(() => {
hydrate(
<Provider store={store}>
<ConnectedRouter history={history}>
<AppRoot />
</ConnectedRouter>
</Provider>,
domRoot,
)
})
Настройка разделенных чанков
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
},
Любое мнение или совет приветствуется, пожалуйста,
Кто-то предложил попробовать с window.onload =() => {но этот подход тоже кажется замедленным.