Dynamic routes in a Nuxt.js SSR project

_docid.vue

<!--pages/search/_docid.vue-->
<template>
    <div class="search">
      <nuxt-link to="/">Back to home</nuxt-link>
      <p>{{docBodies[documentId]}}</p>
    </div>
    <!--doc-->
</template>

<script>
export default {
    name: "Search",
    asyncData({ params }) {
      return {
        documentId: params.docid,
        docBodies: {
          first: "First document",
          second: "Second document"
        }
      };
    }
};
</script>

<!-- ... -->

index.vue

<!--pages/index.vue-->
<template>
    <section>
      <nuxt-link to="/search/first">Search: "first"</nuxt-link>
      <nuxt-link to="/search/second">Search: "second"</nuxt-link>
    </section>
</template>

<script>
export default {
    name: "Index"
};
</script>

<!-- ... -->

nuxt.config.js

export default {
   /*
    ** Rendering mode
    ** Doc: https://nuxtjs.org/api/configuration-mode
    */
   mode: "universal",

   // ...
   
   generate: {
      // ***************************************************
      // *** Without the next line, F5 on dynamic routes ***
      // *** will fail                                   ***
      // ***************************************************
      fallback: true
   },

   // ...
};