SSR: динамический импорт в приложении реакции, как справиться с несоответствием HTML, когда компонент загружается на клиент

Question

Я только начинаю на стороне сервера рендерить приложение 16 с использованием разделения кода и динамического импорта благодаря webpack 4 и реагирующей загрузке.

Мой вопрос может показаться глупым, но есть кое-что, что я не совсем понимаю.

На стороне сервера я жду, что webpack загрузил все модули, прежде чем выплевывать html клиенту.

На стороне клиента перед рендерингом загруженного компонента отображается вид загружаемого компонента.

Итак, в основном сервер отображает загруженный компонент:

<div>loaded component</div>

И клиент гидратирует загрузочный компонент:

<div>loading...</div>

Очевидно, что проблема в том, что React жалуется после hydrate () из-за несоответствия между сервером и клиентом.

В течение нескольких секунд клиент сначала рендерит

<div>loading...</div>

если сервер отрисовал и отправил клиенту html загруженного компонента.

Может ли кто-нибудь просветить меня? как это работает точно? Как я могу предотвратить несоответствие при первом рендеринге при загрузке компонента?

Answer 1

Похоже, вы не загружаете подтверждения вашего клиента.

Loadable.preloadReady().then(() => {
  ReactDOM.hydrate(<App/>, document.getElementById('app'));
});

Это также обязательный шаг для avoid hydration mismatch.

Причина:

Эта проблема возникает на вашем клиенте, поскольку при первоначальном запросе ваш chunks не был загружен, поэтому html output для этих компонентов будет loading... вместо самого component content. Только после того, как фрагменты извлечены и загружены, это начальное состояние loading... будет заменено желаемым содержимым.

Итак, метод Loadable.preloadReady создает Promise, который будет resolved после предварительной загрузки блоков приложения, таким образом, имея все ресурсы, необходимые для начальной стадии, ReactDOM.hydrate будет генерировать тот же результат, что и ваш сервер сделал.

---

TIP

Также я рекомендую вам взглянуть на React Loadable SSR Add-on, это очень удобный add-on, который улучшит управление ресурсами на стороне сервера, предоставляя вам те же преимущества, что и CSR (Client Side Render).

Надстройка на стороне сервера для React Loadable. Загрузка разделенных фрагментов никогда не была такой простой.

См. https://github.com/themgoncalves/react-loadable-ssr-addon