При разработке SPA возникла проблема: если в пользовательском контенте есть вставки кода, которые подключают дополнительные скрипты, то они отрабатывают только при серверном рендеринге, а впоследствии на клиенте скрипт не запускается и виджет не показывается.
Вот например, так выглядит код виджета Твиттера для вставки на страницу:
<blockquote class="twitter-tweet" data-lang="ru">
<p lang="en" dir="ltr">AG Ferguson announces lawsuit against Trump Administration to stop distribution of downloadable “ghost guns,” which anyone can print with a 3D printer <a href="https://t.co/MdSExlQ1jO">pic.twitter.com/MdSExlQ1jO</a></p>
— WA Attorney General (@AGOWA) <a href="https://twitter.com/AGOWA/status/1023993814438952962?ref_src=twsrc%5Etfw">30 июля 2018 г.</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
В конце его есть подключение скрипта
https://platform.twitter.com/widgets.js, который скачивается, запускается, анализирует страницу и преобразует блоки с классом twitter-tweet в виджеты Твиттера. Но если этот текст* вставляет React на клиенте, то скрипт не будет запущен.
Теоретически мы можем проверять что это виджет Твиттера и принудительно его активировать с помощью
twttr.widgets.createTweet, но это не решение проблемы в целом, а только отдельного случая.
*блок кода приходит с сервера как текст и вставляется с помощью dangerouslySetInnerHTML
Средний