Nuxt: Hydration of static page fails (asyncData missing)

Question

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

Answer 1

Ok. I finally found the solution. Just to state things clearly:

• the page should be hydrated with the payload.js
• things should work just normally!

In my case I had a function in my nuxt.config that told the app which routes to generate. Some routes seemed to have missed a leading slash, which broke the whole thing...

Although the route generation process worked just fine, I believe that the payload.js was then not "fitting" the current route...

I don't have the details, but missing leading slashes in my routes was the problem. So if anyone experiences the same, you could just make sure your routes are correct...

‍♀️