~strahinja/strahinja.srht.site

ref: a1bdc8f28beb6be015c9d41f1d86de79597f0a5c strahinja.srht.site/blog/2019-11/20191111.gmi -rw-r--r-- 4.8 KiB
a1bdc8f2Страхиња Радић Added .q/.a > ul formatting 9 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
# Динамичке руте у статичкој апликацији

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

## Проблем

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

=> https://ssr-dynamic-refresh.netlify.com	апликацији

```
/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.

=> https://ssr-dynamic-refresh.netlify.com/search/first	/search/first

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

=> https://strahinja.org/blog/tag/SSR	/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 руте.

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