Улучшенный рендеринг динамических блоков WordPress на стороне сервера

На выходных Дэвид Гвиер анонсировал пользовательский компонент рендеринга на стороне сервера для подключаемых модулей блоков. Соучредитель WPGO Plugins в первую очередь создал свой компонент для ускорения процесса рендеринга динамических блоков в своих собственных плагинах. Однако теперь он выпустил этот компонент для других разработчиков блоков в сообществе WordPress.

Большинство блоков статичны. Их результат остается прежним, и его не нужно менять. Однако некоторые блоки динамические. Их вывод должен изменяться по разным причинам, например, контекст, в котором они выводятся, или другие изменения в системе WordPress. Например, основной блок «Последние сообщения» является динамическим, поскольку отображаемые в нем сообщения меняются по мере написания новых сообщений. Если бы они были выведены как статический блок, конечному пользователю нужно было бы обновлять блок каждый раз при написании нового сообщения. Следовательно, динамические блоки пригодятся, потому что они отображаются сервером в редакторе и во внешнем интерфейсе.

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

Новый компонент Gwyer доступен через GitHub. В проекте мало кода, а его основной файл JavaScript весит чуть более 4 КБ (без сжатия). Он представляет новый компонент <ServerSideRenderX />, который работает аналогично существующему <ServerSideRender /> WordPress. У разработчиков блоков не должно возникнуть проблем с переключением на эту версию для быстрого тестирования.

В настоящее время он использует свой компонент в плагине Flexible FAQs. После прохождения нескольких тестов динамические блоки плагина кажутся намного более отзывчивыми, почти до такой степени, что между ним и статическим блоком, отрисованным с помощью JavaScript, мало различий.

Он также планирует использовать его в своем плагине Simple Sitemap и любых других будущих динамических блоках. Это предполагает, что WordPress пока не улучшит свой серверный компонент рендеринга.

Как работает компонент

Компонент Гвайера – это форк основного компонента <ServerSideRender>, который, по его словам, работает хорошо, за исключением того момента, когда он переходит между состояниями рендеринга. Его пользовательский компонент пытается исправить эту проблему. «Основными дополнениями стали новая часть состояния для отслеживания содержимого предыдущего блока, используемого в качестве содержимого-заполнителя, и новая опора компонента для обработки местоположения счетчика», – сказал он.

Он изложил, как ядро ​​и его компонент работают с рендерингом основного компонента следующим образом:

Блок рендеринга.
Атрибут (ы) блока обновлен.
Замените весь блок содержимого счетчиком.
Визуализировать новое содержимое блока.
Его новый компонент вносит важное изменение, которое создает, по крайней мере, ощутимое увеличение скорости визуального восприятия:

Блок рендеринга.
Атрибут (ы) блока обновлен.
Замените все содержимое блока содержимым заполнителя (текущее / предыдущее содержимое), а также счетчиком в правом верхнем углу.
Визуализировать новое содержимое блока.
«Поскольку содержимое блока по существу остается неизменным до тех пор, пока новый контент не будет готов к рендерингу, он выглядит намного быстрее и плавнее», – сказал Гвайер.

Реальный вопрос заключается в том, должна ли эта вилка попасть в проект Gutenberg и в конечном итоге объединиться с WordPress. Разработчик WordPress Бен Гиллбанкс так считает и создал новый тикет GitHub с запросом.

«Я хотел бы, чтобы он был добавлен в Gutenberg, так как это намного лучший способ визуализации динамических блоков», – сказал Гвайер. «Я буду рад поддержать связь с командой, если они заинтересованы во включении этого в ядро».