mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-21 21:25:11 +00:00
docs: add server concept (#23372)
This commit is contained in:
parent
5514bcd069
commit
914fbd8883
86
docs/1.getting-started/8.server.md
Normal file
86
docs/1.getting-started/8.server.md
Normal 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"}
|
||||
::
|
Loading…
Reference in New Issue
Block a user