The goal of this chapter is to provide a high-level overview of the different parts of the framework, their execution order, and how they work together.
On the server, the following steps are executed for every initial request to your application:
Nuxt is powered by Nitro, a modern server engine.
When Nitro starts, it initializes and executes the plugins under the /server/plugins directory. These plugins can:
After initializing the Nitro server, middleware under server/middleware/ is executed for every request. Middleware can be used for tasks such as authentication, logging, or request transformation.
The Vue and Nuxt instances are created first. Afterward, Nuxt executes its server plugins. This includes:
unhead.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.
app:created hook, which can be used to execute additional logic.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.
validate function should return true if the parameters are valid.false or an object containing a statusCode and/or statusMessage to terminate the request.For more information, see the Route Validation documentation.
Middleware allows you to run code before navigating to a particular route. It is often used for tasks such as authentication, redirection, or logging.
In Nuxt, there are three types of 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.
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.
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.
<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.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.
app:rendered hook.render:html hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen.
This step is similar to the server-side execution and includes both built-in and custom plugins.
Custom plugins in the 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.
app:created hook, which can be used to execute additional logic.This step is the same as the server-side execution and includes the validate method if defined in the definePageMeta function.
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.
Calling app.mount('#__nuxt') mounts the Vue application to the DOM. If the 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, it is recommended to 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.
app:beforeMount hook.app:mounted hook.Unlike on the server, the browser executes the full Vue lifecycle.