Ciclo de Vida da Nuxt

Independentemente da ferramenta que utilizarmos, sentir-nos-emos sempre mais confiantes quando entendermos como a ferramenta funciona por baixo do capô. O mesmo se aplica a Nuxt.

O objetivo deste capítulo é dar-nos uma visão geral de alto nível das diferentes partes da abstração, da sua ordem de execução e da maneira como funcionam em conjunto.

O ciclo de vida da Nuxt descreve o que acontece depois da fase de construção, em que a nossa aplicação é empacotada, dividida em pedaços e reduzida. O que acontece depois desta fase depende do fato de termos ou não a interpretação do lado do servidor ativada. E se tivermos, depende ainda do tipo de interpretação do lado do servidor que tivermos escolhido:

Interpretação do lado do servidor dinâmica (nuxt start) ou geração de sítio estático (nuxt generate).

Ciclo de Vida

Servidor

No caso da interpretação do lado do servidor, estes passos serão executados para cada pedido inicial à nossa aplicação:

• O servidor inicia (nuxt start)

Quando usarmos a geração de sítio estático, as etapas são executadas apenas no momento da construção, mas uma vez para cada página que será gerada.

• O processo de geração inicia (nuxt generate)
• Funções gatilhos da Nuxt
• Intermediário do servidor (serverMiddleware)
• Extensões da Nuxt do lado do servidor
  • em ordem como definidas no nuxt.config.js
• Inicialização do servidor da Nuxt (nuxtServerInit)
  • Ação da Vuex que é chamada apenas no lado do servidor para preencher previamente o armazém de estado
  • O primeiro argumento é o contexto da Vux, o segundo argumento é o contexto da Nuxt
    • Despachar outras ações a partir daqui → único "ponto de entrada" para ações de armazenamentos subsequentes no lado do servidor
  • só pode ser definido no store/index.js
• Intermediário
  • Intermediário Global
  • Intermediário da Disposição
  • Intermediário da Rota
• asyncData
• beforeCreate (método do ciclo de vida da Vue)
• created (método do ciclo de vida da Vue)
• A nova fetch (de cima para baixo, irmãos = paralelos)
• Seriação do estado (função gatilho da Nuxt render:routeContext)
• a interpretação da marcação de hipertexto acontece (função gatilho da Nuxt render:route)
• Função gatilho render:routeDone quando a marcação de hipertexto tiver sido enviada ao navegador
• Função gatilho da Nuxt generate:before
• Os ficheiros de marcação de hipertexto são gerados
  • Geração totalmente estática
    • por exemplo, as cargas úteis estáticas são extraídas
  • generate:page (marcação de hipertexto editável)
  • generate:routeCreated (rota gerada)
• generate:done quando todos os ficheiros de marcação de hipertexto tiverem sido gerados

Cliente

Esta parte do ciclo de vida é totalmente executada no navegador, independentemente do modo de Nuxt escolhido.

• Recebe a marcação de hipertexto
• Carregar recursos (por exemplo, JavaScript)
• extensão de Nuxt do lado do cliente
  • em ordem como definida no nuxt.config.js
• Hidratação da Vue
• Intermediário
  • Intermediário Global
  • Intermediário da Disposição
  • Intermediário da Rota
• asyncData (de bloqueio)
• beforeCreate (método do ciclo de vida da Vue)
• created (método do ciclo de vida da Vue)
• A nova fetch (de cima para baixo, irmãos = paralelos) (sem bloqueio)
• beforeMount (método do ciclo de vida da Vue)
• mounted (método do ciclo de vida da Vue)

Navegar utilizando o componente NuxtLink

O mesmo acontece com a parte do cliente, tudo está a acontecer no navegador, mas apenas quando se navega através do <NuxtLink>. Além disto, não é apresentado qualquer conteúdo da página até que todas as tarefas de bloqueio serem concluídas.

• Intermediário (de bloqueio)
  • Intermediário Global
  • Intermediário da Disposição
  • Intermediário da Rota
• asyncData (de bloqueio) ou carregamento de carga útil totalmente estática
• beforeCreate & created (métodos do ciclo de vida da Vue)
• fetch (sem bloqueio)
• beforeMount & mounted

O Que Se Segue?