router.trailingSlash error with static target

[chazmcgarvey]

Version

@nuxt/content:1.11.1
nuxt: 2.14.12

Reproduction Link

https://codesandbox.io/s/upbeat-hooks-5n26o

Steps to reproduce

1. Configure nuxt.config.js with { target: 'static', router: { trailingSlash: true }, ... }.
2. Build (nuxt generate).
3. Deploy dist/ to a real web server (nuxt start doesn't exhibit the problem).
4. Navigate to a content page.

What is Expected?

The content page loads normally.

What is actually happening?

The content page appears in the browser but fails to hydrate. The console has this:

TypeError: e.page is undefined
    NuxtJS 81
        component
        _render
        r
        get
        _n
        mount
        $mount
        init
        n
        R
        bo
        _update
        r
        get
        _n
        mount
        $mount
        init
        R
        bo
        _update
        r
        get
        _n
        mount
        $mount
        init
        R
        R
        bo
        _update
        r
        get
        _n
        mount
        $mount
        init
        R
        R
        bo
        _update
        r
        get
        _n
        mount
        $mount
        init
        R
        R
        bo
        _update
        r
        get
        _n
        mount
        $mount
        c
        e
        d
        _invoke
        O
        r
        l
        promise callback*r
        l
        promise callback*r
        h
        promise callback*r
        l
        o
        o
        I
        170
        promise callback*170/<
        170
        l
        168
        l
        t
        r
        <anonymous>

This occurs with a generic page like this:

<template>
  <div>
    <nuxt-content :document="page"/>
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params, error }) {
    const slug = params.slug || "index";
    const page = await $content(slug)
      .fetch()
      .catch(err => {
        error({ statusCode: 404, message: "Page not found" });
      });

    return {
      page,
    };
  },
  mounted() {
    console.log(this.page);    // <-- undefined
  },
};
</script>

[sts-ryan-holton]

@chazmcgarvey I don't think you can call page within asyncData, it's to do with the lifecycle of Vue, I had an identical issue, see this

[chazmcgarvey]

Thank you for the link to that other issue. I learned some things from the discussion and following links there.

Still, it seems like it's not quite working like the documentation indicates it should. I believe this code is virtually identical to the example here: https://content.nuxtjs.org/displaying

The important thing is router.trailingSlash; that's the only thing I changed on a newly-minted create-nuxt-app w/ nuxt-content. When trailingSlash is false this code works, but when true it doesn't because page apparently never gets set in the data. I can't find anything that says this shouldn't work with trailingSlash: true.

But yeah, I could easily be missing something; I only picked up nuxt-content and indeed nuxt a few days ago. I do need a better handle on the Nuxt lifecycle, because it's not clear to me what is supposed to be setting page on the client when static: true (I was surprised that asyncData doesn't even seem to be called on the client). When I get a chance I'll dig into the code.

[sts-ryan-holton]

@chazmcgarvey From your reproduction steps, I'm curious to know why you don't run npm run build first? I run npm run build && npm run generate to generate my website?

[chazmcgarvey]

@sts-ryan-holton I believe generate does an implicit build. So it's fine to build then generate, but the build would be redundant.

Actually only using generate instead of build + generate might be even nicer because generate will only build if it detects source changes since the last build. In particular, there's no reason to build if only content is changed, and generate is smart enough to skip building (saving time) if that's the case, so you don't have to keep track in your head whether or not you need to rebuild based on what files you've edited.

Source: https://nuxtjs.org/docs/2.x/get-started/commands#target-static

[sts-ryan-holton]

@chazmcgarvey so are you saying that npm run generate will essentially run build if it needs to based on what's changed, the docs listed says that build will optimise as well, does this mean that process will happen too? Furthermore, I've actually been noticing that my Nuxt JS website (not particular large) is quite slow in Google Page Speed insights

[chazmcgarvey]

@sts-ryan-holton Somebody more knowledgeable might come along and correct me, but yes I don't think there is anything that build does that generate won't also accomplish.

As to the performance of your site, the likeliest issue is probably just large build artifacts with unused styles or code. The output of build makes it easy to see those. I myself had such issues by bringing in Buefy, a large UI component library, but I've had success reducing filesizes with two techniques: 1) custom stylesheet importing only what I'm using, and 2) nuxt-purgecss .

[divine]

There is definitely some weird things going with trailingSlash: true and nuxt content.

See #690 it's one of those bugs, it should be handled by nuxt itself....