Как управлять заголовком, метатегами и т.д. Внутри Реагировать с рендерингом сервера + потоковой?

Есть несколько библиотек, которые управляют тегами <head>, например:

Но все эти библиотеки используют один и тот же API для рендеринга сервера: Перемотка назад.

Сначала вы создаете дерево компонентов с помощью renderToString(), а затем вызываете library.rewind(), чтобы получить данные <head>.

Проблема возникает, когда вы используете react-dom-stream для потока дерева компонентов вместо рендеринга их как строки. Вы не можете rewind, потому что поток еще не потребляется, а когда он есть, это слишком поздно.

Какой подход должен быть реализован здесь?

Ответ 1

К сожалению, общие требования к правильному отображению метатегов означают, что вам сначала нужно будет иметь свой основной контент, чтобы правильно определить, что будет содержать содержимое каждого метатега. Эта проблема, которую вы видите, не имеет строгого отношения к React, но тем более в том, что вам приходится компромисс между эффективностью и точностью тегов контента.

Примитивное решение будет включать в себя такие вещи, как замены строк на блоке HTML в качестве постпроцессора перед отправкой клиенту (в данном случае браузер), но это существенно снизит коэффициент производительности, полученный вами с потоковой страницы.

В противном случае вам нужно будет реализовать способ получения основного первичного содержимого вверх и генерировать метатеги вне потокового ответа или до него - чтобы вы могли сделать некоторые компромиссы там.

Другим решением является рендеринг строки, реализация полной мощности модификаций метатага, а затем использование некоторого слоя кеширования, такого как Varnish, или просто хранилище ключей для каждой страницы в Redis или Memcached.