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

Категорије:
  • Програмирање

Наставивши развој сајта, приметио сам једну специфичност 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 руте.

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