Обновляются ли данные из JSON в статическом билде?

    При импорте локального файла text.json в компонент и последующей статической сборке (например, через Vite или Create React App), все данные «вшиваются» в итоговый JavaScript-бандл. Это означает, что после выполнения команды npm run build или npm run preview, значения из JSON становятся частью статического кода. Если затем изменить содержимое text.json на сервере или в исходниках, но не пересобрать проект, браузер пользователя всё равно увидит старую версию - ту, что была зафиксирована на момент сборки.

    Почему так происходит?

    Статический генератор (или сборщик) на этапе сборки читает файл text.json, преобразует его в JavaScript-объект и помещает внутрь скомпилированного кода. После этого сам файл text.json больше не участвует в работе приложения - он не запрашивается браузером, не лежит в папке dist как отдельный ресурс. Поэтому любое изменение исходного JSON не повлияет на уже развёрнутый билд.

    Как обновлять данные без пересборки?

    Вариант 1: Пересборка проекта

    Самый простой способ - повторно запустить npm run build и заново развернуть папку dist. Это гарантирует, что все изменения из text.json попадут в новый билд. Минус - каждый раз требуется ручное действие и перезагрузка сервера.

    Вариант 2: Динамическая загрузка (Next.js или аналог)

    Фреймворки вроде Next.js позволяют загружать данные на стороне сервера или клиента через getServerSideProps, getStaticProps с revalidate, или просто через fetch. В этом случае JSON-файл можно разместить в публичной директории (public/) и обращаться к нему по HTTP. Тогда при изменении файла на сервере пользователи увидят новые данные после перезагрузки страницы - без пересборки всего проекта.

    Вариант 3: Использование API или базы данных

    Если данные должны обновляться часто, лучше вынести их во внешнее хранилище: JSON-сервер, Firebase, Supabase или собственное REST API. Тогда приложение будет получать актуальные данные по запросу, а не из статического бандла.

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

    • Для статического контента (например, текстовок, которые меняются редко) - используйте импорт и пересборку.
    • Для динамического контента (новости, цены, настройки) - подгружайте JSON через fetch или используйте Next.js с инкрементальной статической регенерацией (ISR).
    • Не забывайте, что в режиме разработки (npm run dev) изменения в JSON обычно подхватываются «на лету» благодаря Hot Module Replacement.

    Таким образом, ответ на вопрос «обновятся ли данные в билде после изменения JSON?» - нет, если не пересобрать проект или не перейти на динамическую загрузку. Выбор метода зависит от того, насколько часто меняются данные и насколько критична скорость их обновления.

    Часто задаваемые вопросы