Nuxt load JSON

Вопрос: Есть json файл, в котором есть данные для инициализации страницы, какой способ загрузки следует использовать?

В 2017 году создатель Nuxt ответил примерно так:

Запрос на сервере

// wrong
export default {
    asyncData() {
        return axios.get('/data.json').then((res) => res.data)
    }
}

Когда мы пытаемся исполнить http запрос на стороне сервера, axios или любая другая библиотека, просто не имеют представления о домене и полном адресе, поэтому запрос файла /data.json ни к чему не приведет. Надо указать полный URL. Это возможно сделать в nuxt.config.js

// nuxt.config.js
module.exports = {
    env: {
        baseURL: (process.env.NODE_ENV === 'production' ? 'https://production.url' : 'https://localhost:3000')
    }
}

И теперь в запросе

async asyncData({req, params, store}) {
    const articles = await axios.get(`${process.env.baseURL}/data.json`).then((res) => res.data)
    return {articles}
}

Метод asyncData() работает только для компонентов страниц pages.

Рекомендуется использовать  axios module для Nuxt.

Директория /static подходит для размещения JSON файлов?

Если необходимо получать доступ к файлам посредством http-запросов, да это хорошее место для размещения json-файлов.

Загрузка JSON файла посредством axios хорошее решение?

Нет, не совсем, поскольку придется выполнить http запрос на стороне сервера, это отразиться на производительности, скорости загрузки.

На стороне сервера можно загрузить файл используя fs.readFile

async asyncData({ req, params, store }) {
    const data = {}
    if (process.server) {
        data.articles = JSON.parse(require('fs').readFileSync('../static/data.json', 'utf8'))
    } else {
        data.articles = await axios.get('/data.json').then((res) => res.data)
    }
    
    return { articles: data.articles }
}

Если данные меняются не часто или вовсе не изменяются, то можно импортировать файл:

<script>
import articles from '~/static/data.json`

export default {
    asyncData({params}) {
        return {articles}
    }
}
</script>    

Преимущество такого подхода в том, что нет необходимости размещать файл с данными в публичной директории static. Например можно создать директорию /data и поместить файл туда /data/data.json.

Чтобы избежать помещение кода json внутрь пакета сборки, можно использовать разделение кода, чтобы загружать данные асинхронно на стороне клиента

<script>
const  getArticles = () => import('~/data/data.json').then((m) => m.default || m)

export default {
  async asyncData({ req }) {
      const articles = await getArticles()
      return { articles }
  }
}
</script>

Недостаток с импортом файла заключается в том, что при изменении файла, для production среды потребуется запустить сборку повторно, чтобы изменения отразились  в приложении. Но мы и говорим о загрузке данных, которые изменяются не часто, или вовсе не меняются.