Как через WordPress отключать приложение написанное на React?

Отличный и очень практичный вопрос, который затрагивает архитектуру современных гибридных сайтов. Отключение React-приложения в WordPress — это не просто «выключение скрипта», а процесс управления состоянием, который можно реализовать несколькими способами в зависимости от целей: полное удаление, условный рендеринг, «ленивая» загрузка или управление через админку.

Вот основные стратегии и их техническая реализация.

## 1. Условная загрузка скриптов (Самый распространенный метод)

Суть в том, чтобы регистрировать и ставить в очередь скрипты и стили React-приложения только на нужных страницах или при выполнении условий.

### Пример: Отключение на определенных страницах или для определенных пользователей

В файле functions.php вашей темы или в коде плагина:

add_action('wp_enqueue_scripts', 'manage_react_app_loading');

function manage_react_app_loading() {
    // Условия для ОТКЛЮЧЕНИЯ приложения
    $disable_react = false;

    // Пример 1: Отключить на главной странице
    if (is_front_page()) {
        $disable_react = true;
    }

    // Пример 2: Отключить для неавторизованных пользователей
    if (!is_user_logged_in()) {
        $disable_react = true;
    }

    // Пример 3: Отключить по наличию специального шорткода на странице
    global $post;
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'disable_react')) {
        $disable_react = true;
    }

    // Пример 4: Отключить через произвольное поле (Custom Field) страницы
    $meta_disable = get_post_meta(get_the_ID(), 'hide_react_app', true);
    if ($meta_disable === 'yes') {
        $disable_react = true;
    }

    // Если условия для отключения не сработали - ставим скрипты в очередь
    if (!$disable_react) {
        // Регистрируем и подключаем основной бандл React-приложения
        wp_enqueue_script('my-react-app', get_template_directory_uri() . '/build/static/js/main.bundle.js', array(), '1.0.0', true);
        // Подключаем CSS-стили приложения
        wp_enqueue_style('my-react-app-style', get_template_directory_uri() . '/build/static/css/main.chunk.css');

        // Часто нужно передать данные из WordPress в React (например, настройки, REST API nonce)
        wp_localize_script('my-react-app', 'wpReactSettings', array(
            'apiUrl' => rest_url(),
            'nonce' => wp_create_nonce('wp_rest'),
            'siteName' => get_bloginfo('name'),
        ));
    }
}

## 2. Управление через опции админки (Для гибкости)

Этот подход позволяет редакторам сайта включать/выключать приложение через Админ-панель WordPress.

### Шаг 1: Создаем поле в настройках (Settings API или ACF)

Простой вариант через Settings API:

// Добавляем поле в существующие настройки (например, "Чтение")
add_action('admin_init', 'register_react_app_settings');
function register_react_app_settings() {
    register_setting('reading', 'react_app_enabled', array(
        'type' => 'boolean',
        'default' => true,
    ));

    add_settings_field(
        'react_app_enabled_id',
        'Включить React-приложение',
        'react_app_enabled_callback',
        'reading',
        'default'
    );
}

function react_app_enabled_callback() {
    $enabled = get_option('react_app_enabled', true);
    echo '<input type="checkbox" name="react_app_enabled" value="1" ' . checked(1, $enabled, false) . ' />';
}

### Шаг 2: Проверяем опцию при загрузке скриптов

Модифицируем функцию из первого пункта:

add_action('wp_enqueue_scripts', 'manage_react_app_loading_v2');
function manage_react_app_loading_v2() {
    // Читаем настройку из базы данных. Если не задана - по умолчанию true (включено).
    $is_app_enabled = get_option('react_app_enabled', true);

    if (!$is_app_enabled) {
        return; // Полностью выходим, не подключая скрипты
    }

    // ... дальше обычная логика подключения скриптов и стилей ...
    wp_enqueue_script('my-react-app', get_template_directory_uri() . '/build/static/js/main.bundle.js', array(), '1.0.0', true);
}

## 3. Условный рендеринг внутри React-приложения

Иногда нужно не отключить загрузку, а управлять отображением приложения. В этом случае скрипты загружаются всегда, но логика «спрятана» в самом React.

В корневом компоненте вашего React-приложения (например, App.js):

import React, { useEffect, useState } from 'react';

function App() {
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    // Проверяем глобальную переменную, переданную из WordPress
    if (window.wpReactSettings && window.wpReactSettings.isAppEnabled === false) {
      // Или делаем AJAX-запрос к WordPress REST API для проверки условия
      fetch('/wp-json/myplugin/v1/check-render')
        .then(response => response.json())
        .then(data => setShouldRender(data.shouldRender));
    } else {
      setShouldRender(true);
    }
  }, []);

  // Условный рендеринг
  if (!shouldRender) {
    // Возвращаем пустой div или fallback-контент (например, от WordPress)
    return <div className="react-app-disabled-message">Приложение временно недоступно.</div>;
  }

  // Основное приложение
  return (
    <div className="my-react-app">
      <h1>Мое React-приложение работает!</h1>
      {/* ... остальной JSX ... */}
    </div>
  );
}

export default App;

## 4. «Ленивая» (динамическая) загрузка приложения

Современный подход, который хорошо сочетается с код-сплиттингом в React. Приложение загружается только когда это действительно нужно (например, при прокрутке до определенного блока).

// В functions.php или в шаблоне
add_action('wp_footer', 'lazy_load_react_app');
function lazy_load_react_app() {
    if (!should_load_react_app()) { // Ваша условная функция
        return;
    }
    ?>
    <script type="module">
        // Используем динамический import() для ленивой загрузки
        const targetElement = document.getElementById('react-root');
        if (targetElement) {
            // Загружаем только когда элемент появляется в viewport
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        import('<?php echo get_template_directory_uri(); ?>/build/static/js/main.bundle.js')
                            .then((module) => {
                                // Инициализируем приложение, если это необходимо
                                console.log('React-приложение загружено!');
                            });
                        observer.disconnect();
                    }
                });
            });
            observer.observe(targetElement);
        }
    </script>
    <?php
}

## Критерии выбора стратегии

• Производительность и SEO: Для полного отключения (чтобы скрипты не грузились) используйте методы 1 или 2. Это уменьшает размер страницы и ускоряет её загрузку там, где React не нужен.
• Гибкость для контент-менеджеров: Если редакторам нужно управлять включением/выключением, выбирайте метод 2 (опции админки) или комбинацию с произвольными полями.
• Сложная логика: Если условие зависит от динамических данных или состояния самого приложения, подойдет метод 3 (условный рендеринг в React).
• Оптимизация загрузки: Для тяжелых приложений на «длинных» страницах идеален метод 4 (ленивая загрузка).

Важное замечание: Если ваше React-приложение рендерит критически важный для SEO контент, его полное отключение может навредить поисковому ранжированию. В таких случаях рассмотрите рендеринг на стороне сервера (SSR) для React или используйте стратегию с ленивой гидратацией.

На практике часто комбинируют несколько подходов. Например, базовое отключение скриптов через wp_enqueue_scripts на ненужных страницах (метод 1) и дополнительный контроль рендеринга внутри самого приложения (метод 3) для более тонкой настройки.