> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt Lifecycle

> Understanding the lifecycle of Nuxt applications can help you gain deeper insights into how the framework operates, especially for both server-side and client-side rendering.

The goal of this guide is to provide you with a high-level overview of the different parts of the framework, their execution order, and how they work together.

## Server Lifecycle

On the server, the following steps are executed for every initial request to your application:

<Steps>
  <Step title="Server Plugins">
    Nuxt is powered by [Nitro](https://nitro.build/), a modern server engine.

    When Nitro starts, it initializes and executes the plugins under the [`/server/plugins`](/directory-structure/server#server-plugins) directory. These plugins can:

    * Capture and handle application-wide errors
    * Register hooks that execute when Nitro shuts down
    * Register hooks for request lifecycle events, such as modifying responses

    <Info>
      Nitro plugins are executed only once when the server starts. In a serverless environment, the server boots on each incoming request, and so do the Nitro plugins. However, they are not awaited.
    </Info>
  </Step>

  <Step title="Server Middleware">
    After initializing the Nitro server, middleware under `server/middleware/` is executed for every request. You can use middleware for tasks such as authentication, logging, or request transformation.

    <Warning>
      Returning a value from middleware will terminate the request and send the returned value as the response. You should generally avoid this behavior to ensure proper request handling.
    </Warning>
  </Step>

  <Step title="App Plugins">
    The Vue and Nuxt instances are created first. Afterward, Nuxt executes its app plugins. This includes:

    * Built-in plugins, such as Vue Router and `unhead`
    * Custom plugins located in the `app/plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`)

    Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/directory-structure/plugins).

    <Info>
      After this step, Nuxt calls the `app:created` hook, which you can use to execute additional logic.
    </Info>
  </Step>

  <Step title="Route Validation">
    After initializing plugins and before executing middleware, Nuxt calls the `validate` method if it is defined in the `definePageMeta` function. The `validate` method, which can be synchronous or asynchronous, is often used to validate dynamic route parameters.

    * The `validate` function should return `true` if the parameters are valid
    * If validation fails, it should return `false` or an object containing a `status` and/or `statusText` to terminate the request

    For more information, see the [Route Validation documentation](/concepts/routing#route-validation).
  </Step>

  <Step title="App Middleware">
    Middleware allows you to run code before navigating to a particular route. You often use it for tasks such as authentication, redirection, or logging.

    In Nuxt, there are three types of middleware:

    * **Global route middleware**
    * **Named route middleware**
    * **Anonymous (or inline) route middleware**

    Nuxt executes all global middleware on the initial page load (both on server and client) and then again before any client-side navigation. Named and anonymous middleware are executed only on the routes specified in the middleware property of the page(route) meta defined in the corresponding page components.

    For details about each type and examples, see the [Middleware documentation](/directory-structure/middleware).

    <Note>
      Any redirection on the server will result in a `Location:` header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie.
    </Note>
  </Step>

  <Step title="Page and Components">
    Nuxt renders the page and its components and fetches any required data with `useFetch` and `useAsyncData` during this step. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.

    By default, Vue pauses dependency tracking during SSR for better performance.

    <Info>
      There is no reactivity on the server side because Vue SSR renders the app top-down as static HTML, making it impossible to go back and modify content that has already been rendered.
    </Info>

    <Warning>
      You should avoid code that produces side effects that need cleanup in root scope of `<script setup>`. An example of such side effects is setting up timers with `setInterval`. In client-side only code we may setup a timer and then tear it down in `onBeforeUnmount` or `onUnmounted`. However, because the unmount hooks will never be called during SSR, the timers will stay around forever. To avoid this, move your side-effect code into `onMounted` instead.
    </Warning>
  </Step>

  <Step title="HTML Output">
    After all required data is fetched and the components are rendered, Nuxt combines the rendered components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is then sent back to the client to complete the SSR process.

    <Info>
      After rendering the Vue application to HTML, Nuxt calls the `app:rendered` hook. Before finalizing and sending the HTML, Nitro will call the `render:html` hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.
    </Info>
  </Step>
</Steps>

## Client Lifecycle

This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen.

<Steps>
  <Step title="App Plugins">
    This step is similar to the server-side execution and includes both built-in and custom plugins.

    Custom plugins in the `app/plugins/` directory, such as those without a suffix (e.g., `myPlugin.ts`) and with the `.client` suffix (e.g., `myClientPlugin.client.ts`), are executed on the client side.

    <Info>
      After this step, Nuxt calls the `app:created` hook, which you can use to execute additional logic.
    </Info>
  </Step>

  <Step title="Route Validation">
    This step is the same as the server-side execution and includes the `validate` method if defined in the `definePageMeta` function.
  </Step>

  <Step title="App Middleware">
    Nuxt middleware runs on both the server and the client. If you want certain code to run in specific environments, consider splitting it by using `import.meta.client` for the client and `import.meta.server` for the server.
  </Step>

  <Step title="Mount Vue App and Hydrate">
    Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If your application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding Server Components), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.

    To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, use `useAsyncData`, `useFetch`, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration, preventing hydration errors.

    <Info>
      Before mounting the Vue application, Nuxt calls the `app:beforeMount` hook. After mounting the Vue application, Nuxt calls the `app:mounted` hook.
    </Info>
  </Step>

  <Step title="Vue Lifecycle">
    Unlike on the server, the browser executes the full [Vue lifecycle](https://vuejs.org/guide/essentials/lifecycle).
  </Step>
</Steps>