Утилиты для SSR
Пакет предоставляет утилиты для организации серверного рендеринга.
GlobalDataScript
Компонент для внедрения серверных данных в клиентский JavaScript. Безопасно сериализует данные с помощью jsesc.
примечание
Для использования GlobalDataScript необходима установка jsesc
как зависимости.
Пример использования:
import { Resolve } from '@sima-land/isomorph/di';
import { GlobalDataScript } from '@sima-land/isomorph/utils/ssr';
import { KnownToken } from '@sima-land/isomorph/tokens';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import { TOKEN } from '../../di/tokens';
import { reducer } from '../../reducer';
import { saga } from '../../saga';
import { Component } from '../../../component';
// Провайдер рендеринга верстки
function provideRender(resolve: Resolve) {
const config = resolve(TOKEN.Server.config);
const params = resolve(KnownToken.Http.Handler.Request.specificParams);
const bridge = resolve(KnownToken.SsrBridge.serverSide);
const logger = resolve(KnownToken.logger);
return async () => {
const sagaMiddleware = createSagaMiddleware({ onError: logger.error });
const store = configureStore({
reducer,
middleware: [sagaMiddleware],
});
await sagaMiddleware
.run(saga, {
params,
features: config.features,
timeout: config.ssrTimeout,
})
.toPromise();
return (
<Provider store={store}>
<div id={bridge.rootElementId}>
<Component />
</div>
{/** Формируем глобально доступные данные для клиента. */}
<GlobalDataScript property={bridge.serverDataKey} value={store.getState()} />
</Provider>
);
};
};
SsrBridge
Объект, предоставляющий методы для связывания серверного и клиентского приложений.
prepare(serviceKey: string)
Метод используемый на сервере. Генерирует идентификаторы для корневого элемента и данных.
resolve<T>(serviceKey: string)
Метод используемый на клиенте. Получает корневой элемент и данные, переданные с сервера.