Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

273
Visualizações
Nuxt: falla la hidratación de la página estática (falta asyncData)

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

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Está bien. Finalmente encontré la solución. Solo para decir las cosas claramente:

  • la página debe estar hidratada con el payload.js
  • ¡las cosas deberían funcionar normalmente!

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

🤷‍♀️

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda