Возникла проблема с React SSR и гидратом, когда DOM слишком похож - PullRequest
Новая
       12

Возникла проблема с React SSR и гидратом, когда DOM слишком похож

1 голос
/ 08 марта 2019

У меня небольшая проблема, и я надеюсь, что, возможно, здесь я смогу найти решение.

У нас есть веб-сайт, который мы создали с помощью React, мы используем этот пакет для рендеринга на стороне сервера и бросаемрезультирующие файлы в S3.

https://github.com/markdalgleish/static-site-generator-webpack-plugin

Затем мы делаем ReactDom.hydrate, например 

if (typeof document !== 'undefined') {
    ReactDOM.hydrate(
        <BrowserRouter context={{}} initialEntries={['/']} initialIndex={0}>
            { renderRoutes(Routes) }
        </BrowserRouter>,
        document.getElementById('root')
    );
}

Чтобы присоединить прослушиватели событий и изменить содержимое для зарегистрированных пользователей.и тому подобное.

Обычно все в порядке, но если DOM на SSR приводит к тому, что новый слишком похож, он ломается.Например.

<nav>
    {!isLoggedin && <a href="/login">Login</a>}
    {isLoggedin && <a href="/options">Options</a>}
</nav>

В конкретном случае, подобном этому, isLoggedIn всегда ложно в SSR, поэтому кнопка входа будет отображаться первой.Затем гидрат изменится для отображения кнопки настроек;появляется слово опций, но href все тот же, что плохо.

Я попытался использовать атрибут ключа или изменить некоторые другие свойства, они игнорировались, но я не нашел способа предотвратить это, кроме того, что изменил DOM, но это не всегда возможно, как вэтот пример меню.

Любые советы или указатели приветствуются!

1 Ответ

0 голосов
/ 08 марта 2019

Программа, о которой вы упомянули, содержит всего около 200 строк кода, подумайте о ее прочтении: https://github.com/markdalgleish/static-site-generator-webpack-plugin/blob/master/index.js Кроме того, не похоже, что «иметь тот же dom» - это проблема, так как код не отображаетсячтобы на первый взгляд иметь процедуры сравнения dom, возможно, проблема в другом, а не в «том же dom».

...