Una vez más tengo una pregunta nuxt:
Tengo algunas páginas estáticas que utilizan asyncData . En mi asyncData cargo datos de un archivo JSON. En el servidor lo hago a través del sistema de archivos y en el cliente con axios.
Esto se parece más o menos a esto:
async asyncData({ app, route, store, error, $axios }) { try { let json const slug = 'mypage' if (process.server) { json = JSON.parse( require('fs').readFileSync( `static/pages/pages.de.${slug}.json`, 'utf8' ) ) } else { json = await $axios.$get(`/pages/pages.de.${slug}.json`).then((res) => { return res }) } return { page: json.items[0], } } catch (e) { console.error('e: ', e) error({ statusCode: 404, message: 'Post not found', e }) } } Esto funciona como se esperaba y obtengo los datos de mi página como se esperaba. Sin embargo, está sucediendo una cosa extraña. Cuando ejecuto nuxt generate para servir mis páginas en modo completamente estático, mis páginas se generan previamente. Por lo tanto, se realiza la solicitud del server y la page se llena con los datos JSON. Luego, los datos se procesan en un HTML estático. Todo está bien...
Pero cuando cargo ese HTML estático (punto de entrada inicial, ¡no después del cambio de ruta!) ¡La hidratación no se está realizando!
En mi pestaña de red, puedo ver que se están cargando un payload.js y un state.js (cosas de vuex). Pero this.page permanece indefinida para siempre...
Según tengo entendido, esta página debe llenarse con datos de this.page justo después de payload.js .
Porque mi plantilla incluye un v-if
<template> <div v-if="page" class="Page"> // page content </div> </template> Todo dentro de ese v-if se rompe. Controladores de clics, etc.
Este problema existe solo en los puntos de entrada iniciales. Si voy a otra ruta y vuelvo funciona perfectamente bien...
Uso el nuxt estable más nuevo v2.15.8 . También tengo páginas con una configuración muy similar donde las cosas funcionan como se esperaba. Entonces, si alguien tiene una idea de dónde podría buscar errores o me puede dar una pista si no entiendo bien algunos conceptos, me encantaría saberlo.
Salud
Está bien. Finalmente encontré la solución. Solo para decir las cosas claramente:
En mi caso, tenía una función en mi nuxt.config que le decía a la aplicación qué rutas generar. Algunas rutas parecían haber pasado por alto una barra inclinada inicial , lo que rompió todo...
Aunque el proceso de generación de rutas funcionó bien, creo que payload.js no "se ajustaba" a la ruta actual...
No tengo los detalles, pero el problema era que faltaban las barras inclinadas iniciales en mis rutas. Entonces, si alguien experimenta lo mismo, puede asegurarse de que sus rutas sean correctas ...
🤷♀️