O objetivo deste capítulo é fornecer uma visão geral de alto nível das diferentes partes do framework, sua ordem de execução e como elas funcionam juntas.

Servidor

No servidor, os seguintes passos são executados para cada solicitação inicial à sua aplicação:

Passo 1: Configurar o Servidor Nitro e Plugins Nitro (Uma Vez)

O Nuxt é alimentado pelo Nitro, um motor de servidor moderno.

Quando o Nitro inicia, ele inicializa e executa os plugins no diretório /server/plugins. Esses plugins podem:

• Capturar e lidar com erros em toda a aplicação.
• Registrar hooks que são executados quando o Nitro é desligado.
• Registrar hooks para eventos do ciclo de vida de solicitações, como modificar respostas.

Passo 2: Middleware do Servidor Nitro

Após inicializar o servidor Nitro, o middleware em server/middleware/ é executado para cada solicitação. O middleware pode ser usado para tarefas como autenticação, registro de logs ou transformação de solicitações.

Passo 3: Inicializar Nuxt e Executar Plugins da Aplicação Nuxt

As instâncias Vue e Nuxt são criadas primeiro. Em seguida, o Nuxt executa seus plugins de servidor. Isso inclui:

• Plugins embutidos, como Vue Router e unhead.
• Plugins personalizados localizados no diretório plugins/, incluindo aqueles sem sufixo (por exemplo, myPlugin.ts) e aqueles com o sufixo .server (por exemplo, myServerPlugin.server.ts).

Os plugins são executados em uma ordem específica e podem ter dependências entre si. Para mais detalhes, incluindo ordem de execução e paralelismo, consulte a documentação de Plugins.

Passo 4: Validação de Rotas

Após inicializar os plugins e antes de executar o middleware, o Nuxt chama o método validate se ele estiver definido na função definePageMeta. O método validate, que pode ser síncrono ou assíncrono, é frequentemente usado para validar parâmetros de rotas dinâmicas.

• A função validate deve retornar true se os parâmetros forem válidos.
• Se a validação falhar, ela deve retornar false ou um objeto contendo um statusCode e/ou statusMessage para encerrar a solicitação.

Para mais informações, veja a documentação de Validação de Rotas.

Passo 5: Executar Middleware da Aplicação Nuxt

O middleware permite que você execute código antes de navegar para uma rota específica. É frequentemente usado para tarefas como autenticação, redirecionamento ou registro de logs.

No Nuxt, existem três tipos de middleware:

• Middleware de rota global
• Middleware de rota nomeado
• Middleware de rota anônimo (ou inline)

O Nuxt executa automaticamente o middleware global na primeira entrada na aplicação e toda vez antes da navegação de rota. Middleware nomeado e anônimo são executados apenas nas rotas especificadas na propriedade middleware do meta da página (rota) definido nos componentes de página correspondentes.

Para detalhes sobre cada tipo e exemplos, veja a documentação de Middleware.

Qualquer redirecionamento no servidor resultará em um cabeçalho Location: sendo enviado ao navegador; o navegador então faz uma nova solicitação para este novo local. Todo o estado da aplicação será redefinido quando isso acontecer, a menos que seja persistido em um cookie.

Passo 6: Renderizar Página e Componentes

O Nuxt renderiza a página e seus componentes e busca quaisquer dados necessários com useFetch e useAsyncData durante este passo. Como não há atualizações dinâmicas e nenhuma operação DOM ocorre no servidor, hooks do ciclo de vida do Vue como onBeforeMount, onMounted e hooks subsequentes NÃO são executados durante SSR.

Por padrão, o Vue pausa o rastreamento de dependências durante SSR para melhor desempenho.

Passo 7: Gerar Saída HTML

Depois que todos os dados necessários são buscados e os componentes são renderizados, o Nuxt combina os componentes renderizados com as configurações de unhead para gerar um documento HTML completo. Este HTML, juntamente com os dados associados, é então enviado de volta ao cliente para completar o processo de SSR.

Cliente (navegador)

Esta parte do ciclo de vida é totalmente executada no navegador, não importa qual modo do Nuxt você escolheu.

Passo 1: Inicializar Nuxt e Executar Plugins da Aplicação Nuxt

Este passo é semelhante à execução do lado do servidor e inclui tanto plugins embutidos quanto personalizados.

Plugins personalizados no diretório plugins/, como aqueles sem sufixo (por exemplo, myPlugin.ts) e com o sufixo .client (por exemplo, myClientPlugin.client.ts), são executados no lado do cliente.

Passo 2: Validação de Rotas

Este passo é o mesmo que a execução do lado do servidor e inclui o método validate se definido na função definePageMeta.

Passo 3: Executar Middleware da Aplicação Nuxt

O middleware do Nuxt é executado tanto no servidor quanto no cliente. Se você deseja que determinado código seja executado em ambientes específicos, considere dividi-lo usando import.meta.client para o cliente e import.meta.server para o servidor.

Passo 4: Montar Aplicação Vue e Hidratação

Chamar app.mount('#__nuxt') monta a aplicação Vue no DOM. Se a aplicação usa o modo SSR ou SSG, o Vue realiza um passo de hidratação para tornar a aplicação do lado do cliente interativa. Durante a hidratação, o Vue recria a aplicação (excluindo Componentes do Servidor), corresponde cada componente aos seus nós DOM correspondentes e anexa ouvintes de eventos DOM.

Para garantir uma hidratação adequada, é importante manter a consistência entre os dados no servidor e no cliente. Para solicitações de API, é recomendado usar useAsyncData, useFetch ou outros composables amigáveis ao SSR. Esses métodos garantem que os dados buscados no lado do servidor sejam reutilizados durante a hidratação, evitando solicitações repetidas. Quaisquer novas solicitações devem ser acionadas apenas após a hidratação, prevenindo erros de hidratação.

Passo 5: Ciclo de Vida do Vue

Ao contrário do servidor, o navegador executa o ciclo de vida completo do Vue.