Я использую рендеринг на стороне сервера с разделением кода в Webpack.Сервер возвращает HTML для компонента.Однако, когда React инициализируется, так как я использую разделение кода, компонент React, который я хочу визуализировать, еще не загружен.Как правило, я хотел бы отобразить экран загрузки.Однако HTML-код для компонента уже обработан, поэтому я не хочу заменять его загрузочным экраном.
Есть ли способ заставить React временно игнорировать компонент и не обновлять DOM?
Компонент выглядит примерно так:
export default class SomeRoute extends Preact.Component {
constructor() {
super();
this.state = {
Component: null,
};
}
componentDidMount() {
if (!this.state.component) {
this.props.componentLoader().then(Component => this.setState({ Component }));
}
}
render({}, { Component }) {
if (!Component) {
return (
<p>Loading...</p>
);
}
return (
<Component />
);
}
}
Вывод <Component />
уже возвращен сервером.