y
Можно было оставить сборку через tsc, конечно. Но там некоторых штук нет, которые поддерживает бабель
Условно, тебе нужно 2 клиента:
1) с hydrate, который будет подключен в браузере через скрипт
2) для сервера, в котором будет StaticRouter и прочее
Вот для клиента конфиг https://pastebin.com/GDQ1JMV6
И условно точно входа для этого конфига
import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'
loadableReady(() => {
hydrate(
<App />,
document.getElementById('root')
)
})
Вот для сервера конфиг (из-за jsx приходится весь сервер собирать) https://pastebin.com/b9cug8Ur
И точка входа для серверной сборки клиента
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import { IStore } from '../../../client/src/types/store'
import ReduxProvider from '../../../client/components/ReduxProvider'
import RouterProvider from '../../../client/components/RouterProvider'
import App from '../../../client/components/App'
import store from '../../../client/store'
interface IRenderApp {
html: string
store: IStore
scripts: string
links: string
styles: string
}
export default function renderApp(url: string, context: object = {}): IRenderApp {
const statsFile = '../../../dist/client/loadable-stats.json'
const extractor = new ChunkExtractor({
statsFile,
entrypoints: [ 'app' ]
})
const jsx = extractor.collectChunks(
<ReduxProvider>
<RouterProvider
location={ url }
context={ context }
>
<App />
</RouterProvider>
</ReduxProvider>
)
const html = renderToString(jsx)
const redux = store.getState()
const scripts = extractor.getScriptTags()
const links = extractor.getLinkTags()
const styles = extractor.getStyleTags()
return {
html,
store: redux,
scripts,
links,
styles
}
}
