docs: update prerender documentation (#22471)

This commit is contained in:
Estéban 2023-08-03 18:04:30 +02:00 committed by GitHub
parent 4d84c714e0
commit 02a50c8eb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 18 deletions

View File

@ -81,52 +81,61 @@ There are two ways to deploy a Nuxt application to any static hosting services:
### Crawl-based Pre-rendering ### Crawl-based Pre-rendering
Use the [`nuxi generate` command](/docs/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory. Use the [`nuxi generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
```bash ```bash
npx nuxi generate npx nuxi generate
``` ```
You can enable crawl-based pre-rendering when using `nuxt build` in the `nuxt.config` file: That's it! You can now deploy the `.output/public` directory to any static hosting service or preview it locally with `npx serve .output/public`.
```ts [nuxt.config.ts|js] Working of the Nitro crawler:
defineNuxtConfig({
nitro: { 1. Load the HTML of your application's root route (`/`), any non-dynamic pages in your `~/pages` directory, and any other routes in the `nitro.prerender.routes` array.
prerender: { 2. Save the HTML and `payload.json` to the `~/.output/public/` directory to be served statically.
crawlLinks: true 3. Find all anchor tags (`<a href="...">`) in the HTML to navigate to other routes.
} 4. Repeat steps 1-3 for each anchor tag found until there are no more anchor tags to crawl.
}
}) This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.
```
::alert{type=info}
Read more about the [`nuxi generate` command](/docs/api/commands/generate#nuxi-generate).
::
### Selective Pre-rendering ### Selective Pre-rendering
You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build. You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
```ts [nuxt.config.ts|js] ```ts [nuxt.config.ts|js]
defineNuxtConfig({ defineNuxtConfig({
nitro: { nitro: {
prerender: { prerender: {
routes: ['/user/1', '/user/2'] routes: ['/user/1', '/user/2']
ignore: ['/dynamic']
} }
} }
}) })
``` ```
When using this option with `nuxi build`, static payloads won't be generated by default at build time. For now, selective payload generation is under an experimental flag. You can combine this with the `crawLinks` option to pre-render a set of routes that the crawler can't discover like your `/sitemap.xml` or `/robots.txt`:
```ts [nuxt.config.ts|js] ```ts [nuxt.config.ts|js]
defineNuxtConfig({ defineNuxtConfig({
/* The /dynamic route won't be crawled */
nitro: { nitro: {
prerender: { crawlLinks: true, ignore: ['/dynamic'] } prerender: {
}, crawlLinks: true,
experimental: { routes: ['/sitemap.xml', '/robots.txt']
payloadExtraction: true }
} }
}) })
``` ```
Setting `nitro.prerender` to `true` is similar to `nitro.prerender.crawlLinks` to `true`.
::alert{type=info}
Read more about [pre-rendering](https://nitro.unjs.io/config#prerender) in the Nitro documentation.
::
### Client-side Only Rendering ### Client-side Only Rendering
If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application. If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application.

View File

@ -15,3 +15,7 @@ Option | Default | Description
-------------------------|-----------------|------------------ -------------------------|-----------------|------------------
`rootDir` | `.` | The root directory of the application to generate `rootDir` | `.` | The root directory of the application to generate
`--dotenv` | `.` | Point to another `.env` file to load, **relative** to the root directory. `--dotenv` | `.` | Point to another `.env` file to load, **relative** to the root directory.
::alert{type=info}
Read more about [pre-rendering and static hosting](/docs/1.getting-started/10.deployment.md#static-hosting).
::