docs: add server concept (#23372)

This commit is contained in:
Estéban 2023-10-11 11:11:41 +02:00 committed by GitHub
parent 5514bcd069
commit 914fbd8883
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 86 additions and 0 deletions

View File

@ -0,0 +1,86 @@
---
navigation.icon: uil:laptop-connection
description: Build full-stack applications, fetch data from your database, create APIs, or even generate static server-side content like a sitemap or a RSS feed, from a single codebase.
---
# Server
Nuxt's server framework allows you to build **full-stack applications**. For example, you can fetch data from a database or another server, create an API or even generate static server-side content like a sitemap or an RSS feed - all from a single codebase.
::ReadMore{link="/docs/guide/directory-structure/server"}
::
## Powered by Nitro
Nuxt's server is [Nitro](https://github.com/unjs/nitro). Nitro was originally created for Nuxt but is now part of [UnJS](https://unjs.io/) and used for other frameworks - and can even be used on its own.
Using Nitro gives Nuxt superpowers:
- Full control of the server-side part of your app
- Universal deployment on any provider (many zero-config)
- Hybrid rendering
## Full control of the server-side part of your app
With Nitro, you can easily manage the server part of your Nuxt app, from API endpoints to middleware.
Both endpoints and middleware can be defined like this:
```ts [server/api/test.ts]
export default defineEventHandler({
// ... Do whatever you want here
})
```
And you can directly return `text`, `json`, `html` or even a `stream`.
Out-of-the-box, Nitro supports **hot module replacement** and **auto-import** like the other parts of your Nuxt application.
::ReadMore{link="/docs/guide/directory-structure/server"}
::
## Universal Deployment
Nitro offers the ability to deploy your Nuxt app anywhere, from a bare metal server to the edge network, with a start time of just a few milliseconds. That's fast!
Today, Nitro offers more than 15 presets to build your Nuxt app for different cloud providers and servers, including:
- [Cloudflare Workers](https://workers.cloudflare.com/)
- [Netlify Functions](https://www.netlify.com/products/functions/)
- [Vercel Edge Network](https://vercel.com/docs/edge-network/introduction)
Or for other runtimes:
- [Deno](https://deno.land/)
- [Bun](https://bun.sh/)
::ReadMore{link="/docs/getting-started/deployment"}
::
## Hybrid Rendering
Do you need both static and dynamic pages in your Nuxt app? Nitro has your back!
Nitro has a powerful feature called `routeRules` which allows you to define a set of rules to customize how each route of your Nuxt app is rendered (and more).
```ts [nuxt.config.ts]
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // Generated at build time for SEO purpose
'/api/*': { cache: { maxAge: 60 * 60 } } // Cached for 1 hour
'/old-page': { redirect: { to: { '/new-page', status: 302 } } // Redirection to avoid 404
// ...
}
})
```
[More rules are available](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering) to customize the rendering mode of your routes.
In addition, there are some route rules (for example, `ssr` and `experimentalNoScripts`) that are not Nitro rules but affect Nuxt's behavior when rendering your pages to HTML.
Some route rules (`redirect` and `prerender`) also affect client-side behavior.
Nitro is used to build the app for server side rendering, as well as pre-rendering.
::ReadMore{link="/docs/guide/concepts/rendering"}
::