Nuxt•2mo ago

How to build an SPA + Nitro for server with Nuxt

If I get it right, to create a SPA like I do with vite, I need to run nuxt generate with ssr: false. But I also want to use nitro for my backend. How can I do this? Is there a way to not use ssr and use nitro at the same time?

2 Replies

kapa.ai•2mo ago

Hi @Ilya Belov. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it's possible to create a Single Page Application (SPA) with Nuxt while also using Nitro for your backend. Here's how you can achieve this: 1. Set ssr: false in your Nuxt configuration to create an SPA:

export default defineNuxtConfig({
  ssr: false
})

export default defineNuxtConfig({
  ssr: false
})

This will disable server-side rendering, resulting in a client-side only application Getting Started > Deployment > Client-side Only Rendering (https://nuxt.com/docs/getting-started/deployment#client-side-only-rendering). 2. Use nuxi build instead of nuxi generate. This will build your application and include the Nitro server for your backend Getting Started > Deployment > Learn More (https://nuxt.com/docs/getting-started/deployment#learn-more). 3. Configure your Nitro preset in the nuxt.config.ts file. For example, if you want to use a Node.js server:

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    preset: 'node-server'
  }
})

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    preset: 'node-server'
  }
})

You can choose the appropriate preset for your deployment target Getting Started > Deployment > Presets (https://nuxt.com/docs/getting-started/deployment#presets). 4. Place your server-side API routes in the server/ directory. These will be handled by Nitro, even when ssr is set to false Guide > Directory Structure > server > Recipes > Nitro Config (https://nuxt.com/docs/guide/directory-structure/server#nitro-config). By following these steps, you'll have an SPA frontend built with Nuxt, while still leveraging Nitro for your backend server. This setup allows you to have client-side rendering for your application while maintaining a powerful server for API routes and other server-side functionalities. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Jacek•2mo ago

Preset value is actually node_server (not node-server) and you don't need to put it in the config as it is the default. Build the project into a Docker container or configure your hosting to run server/index.mjs and you should be good to go. Also consider alternative runtimes - Bun if you want to handle more users or Deno for built-in security.

Gaming

Programming

How to build an SPA + Nitro for server with Nuxt