NuxtJS (VueJS) et PWA

Par Joouul, il y a 5 ans

Javascript

Bonjour,

je suis en plein test du framework NuxtJS. Aucun soucis, framework super simple à utiliser, clair, prise en main hyper rapide, ... Donc que tu plaisir, par contre je cale sur un concept que je ne pige pas, c'est le mode de rendu expliqué sur la doc -> https://fr.nuxtjs.org/guide/commands
Je comprends en gros le mode "statique" qui génère des fichiers "statiques" donc des fichiers .html, mais je m'y perds avec les autres modes de rendu.

Ma question principale découle justement de ce manque de compréhension je pense. Dans mes tests, j'ai créé un projet en local avec une structure simple, c'est à dire un fichier customers/index.vue qui fait un call sur GET /api/customers qui me retourne tous mes customers et un fichier customers/_id.vue qui fait un call POST sur /api/customers/{customer} (ID du customer)

Quand je test le tout en local en dev (npm run dev) ou npm run start pour démarer un serveur local, tout est niquel, mais quand je fais un npm run generate, la route dynamique ne fonctionne plus. Cela me semble logique car derrière un fichier .html est généré, mais pas les routes dynamiques.

Du doup comment faire fonctionner cela avec une PWA ? La doc et ce que j'ai trouvé sur le net indique de référencer chaque route dynamique -> https://nuxtjs.org/api/configuration-generate#routes du genre ceci :
export default {
generate: {
routes: [
'/posts/slug-1',
'/posts/slug-2',
'/posts/slug-3'
]
}
}

Sauf que ce sont des routes dynamiques, donc je ne connais pas toutes les possibilités, surtout quand il s'agit d'ID auto-incrémenté ... :p

Donc si quelqu'un peut me venir en aide avec une solution et surtout une explication pour comprendre ce qu'il se passe, je suis preneur :)
Je suppose que c'est une limite venant de NuxtJS, possible de résoudre ça en changeant de framework ?

Merci déjà à ceux qui liront ce post :)

2 réponses

gillesr, il y a 5 ans

Bonjour,

La fonction generate va, comme son nom l'indique 'générer' un fichier statique par page du dossier pages, si tu utilise des pages dynamiques, nuxt ne peux pas les deviner, donc pour faire ta génération tu peux faire un appel à ton api pour récupérer les infos dont tu as besoin pour récupérer les différentes routes.
Par exemple un truc du genre :

generate: {
routes: function() {
return axios.get(url_du_site + '/api/customers')
.then( (res) =>{
const customers = res.data.customers.map( c => c.name)
return [
'/',
'/about',
...customers
]
})
}
}

C'est à adapter à ta situation, mais l'exemple ci-dessus devrait générer les url pour l'accueil ('/') et une page '/about' ainsi qu'une page par customer (en supposant qu'il y ait une propriété name).
Cela permet de générer toutes les pages en fonction des données provenant de ton api à l'instant ou tu fait le nuxt generate et le contenu des pages reste dynamique. Si tu ajout des éléments via l'api, cela devrait continuer de fonctionner mais les fichiers html ne sont pas généré automatiquement, il faudra refaire un generate.
J'espère que ça a pu t'aider un peu.

Gillesr

Joouul, il y a 5 ans

Hello @gillesr :)

merci pour la réponse, effectivement en fouillant la doc je suis aussi tombé la dessus, mais du coup ça voudrait dire que si j'ai 1000 customers j'aurai 1000 fichiers :p
Ce qui me parait fou :) Sinon je suis tombé sur le paramètre "fallback" qui true qui permet de "forcer" une génération de page pour les pages dynamiques apparemment :)
On va dire que mon problème est à moitié solutionné car je suis pas sûr que ce soit une bonne solution, mais je creuse encore la question :)