Блог

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

У нас есть веб-сайт, который мы создали с помощью 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 amp;amp; <a href="/login">Login</a>}
    {isLoggedin amp;amp; <a href="/options">Options</a>}
</nav>
  

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

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

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

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