Hybrid rendering with static hosting

routeRules: {
  "/": { prerender: true },
  "/rules": { ssr: false },
  "/profile": { ssr: false },
  "/login": { ssr: false },
  "/dashboard": { ssr: false },
  "/table": { ssr: false },
}

routeRules: {
  "/": { prerender: true },
  "/rules": { ssr: false },
  "/profile": { ssr: false },
  "/login": { ssr: false },
  "/dashboard": { ssr: false },
  "/table": { ssr: false },
}

If you prerender your app with the nuxt generate or nuxt 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 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.
...
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.

If you are using purely client-side rendering, then 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.
...
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.

This will build your site, stand up a nuxt instance, and, by default, prerender the root page / along with any of your site's pages it links to, any of your site's pages they link to, and so on.
...
This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.

export default defineNuxtConfig({
  nitro: {
    prerender: {
      ignore: ['/login', '/profile', '/dashboard', '/table', '/rules'],
    },
  },
});

export default defineNuxtConfig({
  nitro: {
    prerender: {
      ignore: ['/login', '/profile', '/dashboard', '/table', '/rules'],
    },
  },
});

   export default defineNuxtConfig({
     ssr: false
   })
   

   export default defineNuxtConfig({
     ssr: false
   })
   

You can enable client-side only rendering with Nuxt in your nuxt.config.ts:

export default defineNuxtConfig({
  ssr: false
})

export default defineNuxtConfig({
  ssr: false
})

   export default defineNuxtConfig({
     ssr: false,
     nitro: {
       hooks: {
         'prerender:routes' ({ routes }) {
           routes.clear() // Do not generate any routes except the defaults
         }
       }
     }
   })
   

   export default defineNuxtConfig({
     ssr: false,
     nitro: {
       hooks: {
         'prerender:routes' ({ routes }) {
           routes.clear() // Do not generate any routes except the defaults
         }
       }
     }
   })
   

Note that Hybrid Rendering is not available when using nuxt generate.

export default defineNuxtConfig({
  hooks: {
    'prerender:routes' ({ routes }) {
      routes.clear() // Do not generate any routes (except the defaults)
    }
  },
})

export default defineNuxtConfig({
  hooks: {
    'prerender:routes' ({ routes }) {
      routes.clear() // Do not generate any routes (except the defaults)
    }
  },
})

For some reason, I can't directly navigate to specific pages like /login (not client-side navigation, that works fine). When I try to, I'm automatically redirected to the / (index) page. The only way to navigate around the application is with client-side navigation.

Since I’ve subdirectories such as <http://www.example.com/about/.> The index.html needs to be added after the subdirectory i.e "https://www.example.com/about/index.html" so the page will load without 403 errors.
...
All the URLs should end with a trailing /. i.e., <https://example.co/about> should be <https://example.co/about/.> This can be done by adding trailingSlash: true inside router key of nuxt.config.js.