CDN интеграция

MDX (Markdown + JSX) позволяет смешивать Markdown и компоненты React в одном файле, что делает его мощным инструментом для документации и контентных приложений. Использование MDX через CDN особенно удобно для быстрых прототипов, демонстраций и проектов, где нет необходимости настраивать сборку с Webpack или Vite.

Для интеграции через CDN необходимо подключить следующие основные ресурсы:

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@mdx-js/runtime/dist/mdx-runtime.umd.js"></script>
  • React и ReactDOM — базовые библиотеки, требуемые для рендеринга JSX.
  • @mdx-js/runtime — предоставляет функцию MDXProvider и компонент MDXRuntime, позволяющие исполнять MDX-код прямо в браузере.

Создание MDX-контента

MDX-контент можно определить прямо внутри HTML через тег <script type="text/mdx"> или в виде строки в JavaScript. Пример использования строки:

<div id="root"></div>
<script type="text/javascript">
  const mdxContent = `
# Заголовок MDX

Это пример контента с **MDX** и компонентами React.

<MyButton>Нажми меня</MyButton>
`;

  function MyButton({ children }) {
    return React.createElement('button', { style: { padding: '8px', fontSize: '16px' } }, children);
  }

  ReactDOM.createRoot(document.getElementById('root')).render(
    React.createElement(MDXRuntime.MDXProvider, { components: { MyButton } },
      React.createElement(MDXRuntime.MDXContent, { children: mdxContent })
    )
  );
</script>
  • MDXRuntime.MDXProvider — позволяет передавать пользовательские компоненты для использования в MDX.
  • MDXRuntime.MDXContent — компилирует MDX в JSX на лету и рендерит его.
  • Пользовательские компоненты (MyButton) можно использовать напрямую в MDX-контенте.

Поддержка компонентов и стилизация

Компоненты React, подключенные через components в MDXProvider, могут быть любыми: кнопки, карточки, формы. Для стилизации используется стандартный inline-стиль, CSS-классы или подключение CSS-файлов. Например:

<script type="text/javascript">
  function AlertBox({ children }) {
    return React.createElement('div', { className: 'alert-box' }, children);
  }

  const mdxContent = `
<AlertBox>Важное сообщение!</AlertBox>
`;

  ReactDOM.createRoot(document.getElementById('root')).render(
    React.createElement(MDXRuntime.MDXProvider, { components: { AlertBox } },
      React.createElement(MDXRuntime.MDXContent, { children: mdxContent })
    )
  );
</script>

<style>
  .alert-box {
    padding: 12px;
    background-color: #fdd;
    border: 1px solid #f99;
    border-radius: 4px;
  }
</style>

Асинхронная загрузка MDX через CDN

MDX-контент можно загружать из внешнего источника через fetch и динамически рендерить:

<script type="text/javascript">
  async function loadMDX(url) {
    const response = await fetch(url);
    const mdxText = await response.text();

    ReactDOM.createRoot(document.getElementById('root')).render(
      React.createElement(MDXRuntime.MDXProvider, {},
        React.createElement(MDXRuntime.MDXContent, { children: mdxText })
      )
    );
  }

  loadMDX('https://example.com/content.mdx');
</script>
  • Поддерживает динамическую подгрузку контента без пересборки приложения.
  • Позволяет использовать MDX в SPA и простых HTML-страницах.

Ограничения и нюансы CDN-интеграции

  • Производительность может страдать при большом объёме MDX, так как компиляция выполняется в браузере.
  • Не поддерживаются некоторые расширенные плагины для MDX, требующие Node.js.
  • Статическая типизация и оптимизация компонентов невозможны без сборщика.
  • Для сложных проектов предпочтительнее использовать сборку через Vite, Webpack или Next.js.

Практические рекомендации

  1. Минимизировать количество MDX-файлов с тяжелыми компонентами.
  2. Кэшировать MDX-контент на клиенте при динамической загрузке.
  3. Использовать компактные и оптимизированные компоненты для быстрого рендеринга.
  4. Для интерактивных элементов всегда передавать необходимые пропсы через MDXProvider.

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

Оглавление