Join our community

Get access to the complete guide to developing and deploying fast, production-ready Nuxt apps.

7-3 Route Rules

In this lesson, we look at how we can use route rules to configure how Nuxt 3 renders each part of our app — this is called Hybrid Rendering.

NOTE: Currently this is experimental, so use caution here. The API might change before it’s fully stable.

We can specify different render modes on a per-route basis. We can disable SSR, enable static generation, and use full incremental static generation (SWR) where it’s supported.

There are also utilities to specify redirects and headers on a per-route basis, which is very convenient.

VueSchool article on Hybrid Rendering: https://vueschool.io/articles/vuejs-tutorials/hybrid-rendering-in-nuxt-js-3/

Stale-while-revalidate (SWR): https://web.dev/stale-while-revalidate/

This course was originally built with Nuxt 3, but it's no longer being maintained. You can still follow the lessons, but make sure to use the exact dependency versions listed in the course repository to avoid breaking changes.

If you’re looking for the most up-to-date and fully supported version, we recommend Mastering Nuxt: Full Stack Unleashed , which uses Nuxt 4 and actively being maintained.