Главная ошибка — начинать с компонентов, а не с контракта данных. Сначала опишите, какие сущности приходят из WordPress: записи, страницы, меню, SEO-поля, медиа, превью, переводы. Для каждой сущности зафиксируйте обязательные поля и поведение при пустых значениях.
Что проверить в React-слое:
— единый клиент для REST или GraphQL, без запросов из случайных компонентов;
— состояния loading/error/empty;
— типы для ответа API, а не any по всему проекту;
— кеширование после обновления контента;
— fallback для изображений, slug и удалённых записей.
Отдельно продумайте маршруты. WordPress любит гибкую структуру URL, React — предсказуемую. Сделайте один слой резолвинга: slug → тип сущности → шаблон. Тогда страница, пост и кастомный тип не расползутся по разным хакам.
Не завязывайте верстку на админские привычки редактора. Если поле может быть не заполнено, блок должен исчезать корректно. Если редактор меняет порядок секций, фронтенд не должен ломать сетку.
Хороший React-фронтенд для Headless WordPress начинается не с красивого UI, а с устойчивой модели данных. Согласуйте контракт заранее — и компоненты станут проще.
WordPress как Headless CMS
@wp_headless_arch_ww
React-фронтенд для Headless WordPress: что заложить до первого релиза
Этот пост опубликован в Telegram-канале WordPress как Headless CMS. Подписаться можно по ссылке: @wp_headless_arch_ww.