Интерактивные главы MDX
Обычные главы остаются Markdown-файлами. Если объяснению нужен React-компонент,
создайте файл .mdx в том же каталоге docs. Он попадёт в статическую сборку;
компоненты с состоянием станут интерактивными после загрузки JavaScript.
Попробуйте кеш
Нажмите «Опубликовать», затем «Посетить страницу». Обратите внимание: уведомление делает кеш устаревшим, а следующее посещение обновляет его версию. Повторное посещение без публикации использует ту же версию.
В CMS: версия 1. В кеше: версия 1.
Кеш готов к выдаче. Посещений: 0.
Это учебная модель: она меняет состояние только в вашей вкладке и не отправляет запросы на стенд. Реальное поведение и ограничения разобраны в главе SSG/ISR.
Как добавить компонент
Компоненты Callout и CacheDemo зарегистрированы в
components/mdx.tsx. Для нового примера добавьте
React-компонент в этот список и используйте его в MDX:
<Callout title="Проверьте себя">Почему ответ webhook не подтверждает готовность HTML?</Callout>
<CacheDemo />
MDX компилируется только из файлов репозитория во время сборки. Содержимое CMS и пользовательский ввод не исполняются как MDX. Внешние импорты в главах не нужны: библиотеки и компоненты подключаются в приложении и фиксируются lockfile.
Упражнение
Добавьте подсказку через Callout, соберите руководство и откройте эту главу.
Затем добавьте отдельный интерактивный пример с useState и объясните, какая
его часть существует в готовом HTML, а какая начинает работать после гидратации.