Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: add route rules to the concepts > rendering #8292

Merged
merged 3 commits into from Oct 18, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 37 additions & 5 deletions docs/content/2.guide/1.concepts/3.rendering.md
Expand Up @@ -69,14 +69,46 @@ In most cases, universal rendering as performed in Nuxt 2 offers a good user and

### Hybrid Rendering

Hybrid rendering allows different caching rules per route and decides how the Server should respond to a new request on a given URL.

At the moment, every page (or **route**) of a Nuxt application must use the same rendering mode, client-side or universal. But in various cases, some pages could be generated at build time, while others should be client-side rendered. For example, think of a content website with an admin section. Every content page should be primarily static and generated once, but the admin section requires registration and behaves more like a dynamic application.

[Read the open RFC discussing implementation and gathering community feedback.](https://github.com/nuxt/framework/discussions/560)
Hybrid rendering allows different caching rules per route using **Route Rules** and decides how the Server should respond to a new request on a given URL.

### Rendering on CDN Edge Workers

Traditionally, server-side and universal rendering was only possible using Node.js. Nuxt 3 takes it to another level by directly rendering code in CDN edge workers, reducing latency and costs.

Nitro is the new [server engine](/guide/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Workers, and more. Nitro's design is platform-agnostic and allows rendering a Nuxt application at the edge, closer to your users, allowing replication and further optimizations.

### Route Rules

> πŸ§ͺ Route rules are still under active development, and subject to change.

Previously every route/page of a Nuxt application and server must use the same rendering mode, client-side or universal. But in various cases, some pages could be generated at build time, while others should be client-side rendered. For example, think of a content website with an admin section. Every content page should be primarily static and generated once, but the admin section requires registration and behaves more like a dynamic application.

Nuxt 3 starting from rc.12 comes with the public beta for route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route! Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using [nitro caching layer](https://nitro.unjs.io/guide/introduction/cache). Whenever possible, route rules will be automatically applied to the deployment platform's native rules (currently Netlify and Vercel are supported).

- `redirect` - Define server-side redirects.
- `ssr` - Disables server-side rendering for sections of your app and make them SPA-only with `ssr: false`
- `cors` - Automatically adds cors headers with `cors: true` - you can customize the output by overriding with `headers`
- `headers` - Add specific headers to sections of your site - for example, your assets
- `static` and `swr` - `static` enables a single (on-demand) build; `swr` enables a static build, that lasts for a configurable TTL. (currently enables full incremental static generation on Netlify, with Vercel coming soon)

**Examples:**

```ts
export default defineNuxtConfig({
routeRules: {
// Static page generated on-demand, revalidates in background
'/blog/**': { swr: true },
// Static page generated on-demand once
'/articles/**': { static: true },
// Set custom headers matching paths
'/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
// Render these routes with SPA
'/admin/**': { ssr: false },
// Add cors headers
'/api/v1/**': { cors: true },
// Add redirect headers
'/old-page': { redirect: '/new-page' },
'/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }
}
})
```