Динамичке руте у статичкој апликацији

11.11.2019

Наставивши развој сајта, приметио сам једну специфичност Nuxt.js-а. Уколико статички генеришете апликацију преко nuxt generate, а не наведете експлицитно које руте ће бити генерисане, руте са параметрима ће и даље функционисати, али само ако су активиране кроз саму апликацију, преко Vue Router-а (рецимо, <nuxt-link>). Ако унесете УРЛ странице у адресном пољу, или притиснете F5, добићете поруку о грешци, као да рута не постоји!

Проблем

На пример, нека у апликацији имамо следеће странице:

/pages
 ├──/search
 │   └──_docid.vue
 └──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>

<!-- ... -->

<!--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>

<!-- ... -->

Покретањем nuxt generate без посебно подешене generate секције фајла nuxt.config.js биће генерисана само основна рута, /. Ако приступимо почетној страници, па затим активирамо линк Search: "first", учитаће се страница за претрагу, /search/first. Међутим, притиском на F5 или Ctrl+R страница неће бити исправно учитана. Исто се дешава приступом преко линка /search/first.

Са овим понашањем Nuxt.js-а сам се суочио када сам желео да у свој блог додам подршку за листање свих страница са одређеном ознаком. Рецимо, у мом блогу се за то користи рута /blog/tag/:tagname, и овај чланак ће се појавити у листи чланака на рути /blog/tag/SSR.

Ако негде у апликацији, рецимо у приказу појединачних чланака, позовемо

<nuxt-link :to="`/blog/tag/${tag.name}`">
    {{tag.name}}
</nuxt-link>

све ће функционисати, али не и у поменута два случаја: ако директно посетимо УРЛ или освежимо већ учитану страницу.

Решење

Решење овог проблема је генерисање странице која ће бити „резервна опција“ у случају када задата рута није статички генерисана. Ово се постиже додавањем опције fallback у секцију generate у датотеци 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
   },

   // ...
};

Ова опција има три могуће вредности:

• true: fallback руту ће опслуживати фајл /404.html,

• false: fallback руту ће опслуживати фајл /200.html,

• '[назив_фајла].html': експлицитно задавање фајла fallback руте.

Ова лако занемарљива опција може представљати разлику између функционалног и нефункционалног сајта.