router.trailingSlash error with static target

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>

[divine]

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

See https://github.com/nuxt/content/pull/690 it’s one of those bugs, it should be handled by nuxt itself…

[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 .