Обновляются ли данные из 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?» - нет, если не пересобрать проект или не перейти на динамическую загрузку. Выбор метода зависит от того, насколько часто меняются данные и насколько критична скорость их обновления.