Nuxt.js: Unify nuxt behaviour between dev/server and nuxt generate by serving static files during nuxt generate.

[sugoidesune]

What problem does this feature solve?

In dev/server mode, http requests to itself work, because the server is running, during nuxt generate they don't because files aren't served.

For instance, thefollowing would work during development, on a SSR server, and during navigation in a browser.

async asyncData({ req, isServer, params, store }) {

   authors = await axios.get('/data.json').then(res => res.data)

  return { authors }
}

But it breaks during nuxt generate because there is no server that would serve this file.

I have seen the following solutions posted by @Atinux in this comment
https://github.com/nuxt/nuxt.js/issues/123#issuecomment-272246782

async asyncData({ req, isServer, params, store }) {
  const data = {}

  if (process.server) {
    data.authors = JSON.parse(require('fs').readFileSync('../static/data.json', 'utf8'))
  } else {
    data.authors = await axios.get('/data.json').then(res => res.data)
  }

  return { authors }
}

The problem I have with this solutions is that it adds a lot of boilerplate that you have to actively think about.
You could abstract it into a new fileAxios('/data.json') function ofcourse, that would make it harder to share code again. It just feels clunky.

The second solution is to use the Webpack import statement

const getAuthors = () => import('~/data/authors.json').then(m => m.default || m)

export default {
  async asyncData ({ req }) {
    const authors = await getAuthors()

    return { authors }
  }
}

This in turn is a completely different API, less code sharing, and makes it also much more tricky to use with dynamic imports.

const getAuthor = (name, list) => import(`~/data/${name}/${list}.json`).then(m => m.default || m)

export default {
  async asyncData ({ req, params }) {
    const author = await getAuthor(params.name, params.list)
    return { author }
  }
}

This will cause Webpack to pack every json file in any subfloder in data, since it cant know upfront which will be needed.

Overall the code reusability is pretty bad in both cases, and just adds noise and complexity to it.

What do the proposed changes look like?

If nuxt generate would also serve the static files, that are usually available in dev/server/browser mode,
we wouldn't need any of that. It would just work like everywhere else.

As a test i started an npm live-server in the static folder of my nuxt project, and then ran nuxt-generate seperately,
and it worked perfectly like it should. The asyncData method was able to http request all static files for all dynamic routes and generate it.
With 0 Changes to the codebase.

[Atinux]

This is in progress with the full static PR: https://github.com/nuxt/nuxt.js/pull/6159/files#diff-d45aac1178c9ef760ed5a5f768341f45R93