Отрисовка серверной версии noscript без повторного использования предупреждений разметки в React
В моем JS-компоненте я в настоящее время отображаю не-js версию разметки для совместимости со старыми браузерами. Затем на стороне клиента это перерисовывается в разметку js-on.
Это вызывает ошибку ниже, где вы можете увидеть версию noscript, которая вызывает эту ошибку.
Предупреждение: React попытался повторно использовать разметку в контейнере, но контрольная сумма была недействительной. Обычно это означает, что вы используете рендеринг сервера, а разметка, созданная на сервере, не соответствует ожиданиям клиента. Реагируйте на добавленную новую разметку, чтобы компенсировать работоспособность, но вы утратили многие преимущества рендеринга сервера. Вместо этого выясните, почему генерируемая разметка отличается на клиенте или сервере:
(client) <div class="shortlist ... (server) <noscript data-reacti ...
Есть ли способ решить эту проблему, когда клиент получает самый быстрый опыт при сохранении поддержки браузеров noscript?
1 ответ
Мое решение было заменить <noscript> с <div id="noscript" ref="noscript"> И в componentDidMount вызов this.refs.noscript.style.display = 'none';,
Чтобы скрыть noscript div как можно скорее, я также добавил <script>try{document.getElementById('noscript').style.display='none'}catch(e){}</script> к index.html сразу же после заполнителя для серверной стороны отображается разметка.