From 1ee1f74d57040ca2aba42d82326e66a700e1d8ef Mon Sep 17 00:00:00 2001 From: praburangki Date: Thu, 6 Jun 2024 20:48:00 +0800 Subject: [PATCH] docs: add deployment advice for client-side rendering (#27426) --- docs/2.guide/1.concepts/3.rendering.md | 30 ++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md index 4adf1baaab..8bfe220a30 100644 --- a/docs/2.guide/1.concepts/3.rendering.md +++ b/docs/2.guide/1.concepts/3.rendering.md @@ -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"} :: +::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 allows different caching rules per route using **Route Rules** and decides how the server should respond to a new request on a given URL.