From e6f60b3b36aa204a1b045e4d02b099737a9eaea8 Mon Sep 17 00:00:00 2001 From: Anders Bootsmann Date: Thu, 2 Jan 2025 14:15:13 +0100 Subject: [PATCH 1/3] docs: add api functionality docs (#30436) --- docs/2.guide/1.concepts/3.rendering.md | 27 +++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md index 535b8bf57adc..911b0b19844e 100644 --- a/docs/2.guide/1.concepts/3.rendering.md +++ b/docs/2.guide/1.concepts/3.rendering.md @@ -92,6 +92,21 @@ 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"} :: +**Ensuring API Functionality** +Deploying Nuxt using `npm run generate` with `ssr:false` removes the `~/server/api` functions. Consider using `npm run build` for `~/server/api` endpoints to work correctly. + +If running your app in `npm run build` mode with `ssr:false`, remember to add `["200.html", "404.html" "/" ]` to your `nitro.prerender` configuration to ensure your app functions work in Single-Page Application (SPA) mode. + +```ts twoslash [nuxt.config.ts] +export default defineNuxtConfig({ + nitro: { + prerender: { + routes: ["/", "200.html", "404.html"], + } + }, +}) +``` + ::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!?**. :: @@ -179,12 +194,14 @@ Note that Hybrid Rendering is not available when using [`nuxt generate`](/docs/a ::card-group ::card --- - icon: i-simple-icons-github + +icon: i-simple-icons-github title: Nuxt Vercel ISR to: https://github.com/danielroe/nuxt-vercel-isr target: _blank ui.icon.base: text-black dark:text-white --- + Example of a Nuxt application with hybrid rendering deployed on Vercel. :: :: @@ -210,22 +227,26 @@ You can explore open source examples deployed on some of the platform mentioned ::card-group ::card --- - icon: i-simple-icons-github + +icon: i-simple-icons-github title: Nuxt Todos Edge to: https://github.com/atinux/nuxt-todos-edge target: _blank ui.icon.base: text-black dark:text-white --- + A todos application with user authentication, SSR and SQLite. :: ::card --- - icon: i-simple-icons-github + +icon: i-simple-icons-github title: Atinotes to: https://github.com/atinux/atinotes target: _blank ui.icon.base: text-black dark:text-white --- + An editable website with universal rendering based on Cloudflare KV. :: :: From e3b859c6ef583cd3fea9195d5d74266a85ee44ea Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 4 Jan 2025 22:35:14 +0000 Subject: [PATCH 2/3] docs: move to warning instead --- docs/2.guide/1.concepts/3.rendering.md | 30 ++++++-------------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md index 911b0b19844e..2fd8d3ac13fa 100644 --- a/docs/2.guide/1.concepts/3.rendering.md +++ b/docs/2.guide/1.concepts/3.rendering.md @@ -92,20 +92,6 @@ 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"} :: -**Ensuring API Functionality** -Deploying Nuxt using `npm run generate` with `ssr:false` removes the `~/server/api` functions. Consider using `npm run build` for `~/server/api` endpoints to work correctly. - -If running your app in `npm run build` mode with `ssr:false`, remember to add `["200.html", "404.html" "/" ]` to your `nitro.prerender` configuration to ensure your app functions work in Single-Page Application (SPA) mode. - -```ts twoslash [nuxt.config.ts] -export default defineNuxtConfig({ - nitro: { - prerender: { - routes: ["/", "200.html", "404.html"], - } - }, -}) -``` ::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!?**. @@ -115,6 +101,10 @@ Watch a video from Alexander Lichter about **Building a plain SPA with Nuxt!?**. 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. +::warning +If you prerender your app with the `nuxi generate` or `nuxi build --prerender` commands, then you will not be able to use any server endpoints as no server will be included in your output folder. If you need server functionality, use `nuxi build` instead. +:: + 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`: @@ -194,14 +184,12 @@ Note that Hybrid Rendering is not available when using [`nuxt generate`](/docs/a ::card-group ::card --- - -icon: i-simple-icons-github + icon: i-simple-icons-github title: Nuxt Vercel ISR to: https://github.com/danielroe/nuxt-vercel-isr target: _blank ui.icon.base: text-black dark:text-white --- - Example of a Nuxt application with hybrid rendering deployed on Vercel. :: :: @@ -227,26 +215,22 @@ You can explore open source examples deployed on some of the platform mentioned ::card-group ::card --- - -icon: i-simple-icons-github + icon: i-simple-icons-github title: Nuxt Todos Edge to: https://github.com/atinux/nuxt-todos-edge target: _blank ui.icon.base: text-black dark:text-white --- - A todos application with user authentication, SSR and SQLite. :: ::card --- - -icon: i-simple-icons-github + icon: i-simple-icons-github title: Atinotes to: https://github.com/atinux/atinotes target: _blank ui.icon.base: text-black dark:text-white --- - An editable website with universal rendering based on Cloudflare KV. :: :: From cec95568e2397938e5dd02c3ab77c9207d771bfc Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 4 Jan 2025 22:37:31 +0000 Subject: [PATCH 3/3] chore: remove extra line --- docs/2.guide/1.concepts/3.rendering.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md index 2fd8d3ac13fa..41aacb651955 100644 --- a/docs/2.guide/1.concepts/3.rendering.md +++ b/docs/2.guide/1.concepts/3.rendering.md @@ -92,7 +92,6 @@ 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!?**. ::