mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-31 07:40:33 +00:00
docs: add deployment advice for client-side rendering (#27426)
This commit is contained in:
parent
3af52b0375
commit
1ee1f74d57
@ -69,6 +69,36 @@ If you do use `ssr: false`, you should also place an HTML file in `~/app/spa-loa
|
|||||||
:read-more{title="SPA Loading Template" to="/docs/api/configuration/nuxt-config#spaloadingtemplate"}
|
:read-more{title="SPA Loading Template" to="/docs/api/configuration/nuxt-config#spaloadingtemplate"}
|
||||||
::
|
::
|
||||||
|
|
||||||
|
::tip{to="https://www.youtube.com/watch?v=7Lr0QTP1Ro8" icon="i-logos-youtube-icon" target="_blank"}
|
||||||
|
Watch a video from Alexander Lichter about **Building a plain SPA with Nuxt!?**.
|
||||||
|
::
|
||||||
|
|
||||||
|
### Deploying a Static Client-Rendered App
|
||||||
|
|
||||||
|
If you deploy your app to [static hosting](/docs/getting-started/deployment#static-hosting) with the `nuxi generate` or `nuxi build --prerender` commands, then by default, Nuxt will render every page as a separate static HTML file.
|
||||||
|
|
||||||
|
If you are using purely client-side rendering, then this might be unnecessary. You might only need a single `index.html` file, plus `200.html` and `404.html` fallbacks, which you can tell your static web host to serve up for all requests.
|
||||||
|
|
||||||
|
In order to achieve this we can change how the routes are prerendered. Just add this to [your hooks](/docs/api/advanced/hooks#nuxt-hooks-build-time) in your `nuxt.config.ts`:
|
||||||
|
|
||||||
|
```ts twoslash [nuxt.config.ts]
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
hooks: {
|
||||||
|
'prerender:routes' ({ routes }) {
|
||||||
|
routes.clear() // Do not generate any routes (except the defaults)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
This will produce three files:
|
||||||
|
|
||||||
|
- `index.html`
|
||||||
|
- `200.html`
|
||||||
|
- `404.html`
|
||||||
|
|
||||||
|
The `200.html` and `404.html` might be useful for the hosting provider you are using.
|
||||||
|
|
||||||
## Hybrid Rendering
|
## Hybrid Rendering
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
Loading…
Reference in New Issue
Block a user