Once again I have a nuxt question:

I have some static pages which make use of asyncData. In my asyncData I load data from a JSON file. On the server I do that via filesystem and on the client with axios.

This looks more or less like this:

async asyncData({ app, route, store, error, $axios }) {
  try {
    let json
    const slug = 'mypage'

    if (process.server) {
      json = JSON.parse(
        require('fs').readFileSync(
          `static/pages/pages.de.${slug}.json`,
          'utf8'
        )
      )
    } else {
      json = await $axios.$get(`/pages/pages.de.${slug}.json`).then((res) => {
        return res
      })
    }

    return {
      page: json.items[0],
    }
  } catch (e) {
    console.error('e: ', e)
    error({ statusCode: 404, message: 'Post not found', e })
  }
}

This works like expected and I get my page data like expected. One weird thing is happening though. When I run nuxt generate to serve my pages in full static mode my pages are pregenerated. Therefore the server request is made and page is filled with the JSON data. The data is then rendered into a static HTML. All good...

But when I load up that static HTML (initial entry point, not after route change!) the hydration is not being done!

In my network tab I can see a payload.js and a state.js (vuex stuff) being loaded. But this.page remains undefined forever...

In my understanding this.page should be filled with data from the payload.js right after loading it.

Because my template includes a v-if

<template>
  <div v-if="page" class="Page">
    // page content
  </div>
</template>

Everything inside that v-if breaks. Click handlers etc.

This problem exists only on the initial entry points. If I go to another route and come back it works perfectly fine...

I use the newest stable nuxt v2.15.8. Also I have pages with a very similar setup where things work like expected. So if anyone has a clue where I could look for errors or give me a hint if I misunderstand some concepts, I would be very glad to hear.

Cheers