Nuxt dynamic route return 404 after page is reloaded

Question

Hello everyone I'm working on a project that uses nuxt js and I'm just new to this framework. I've configured it to use spa mode, fyi I did not change or add anything in my nuxt config just the default. And below is how I've setup my pages.

pages/users/index.vue - shows list or users

pages/users/_id.vue - show specific user

I've deployed my project using npm run build and npm run start command. The dist directory is then hosted in a nginx server.

The issue is that when i navigate to /user/id using nuxt link the page is rendered properly, but when I access the page url directly or refresh the page I get nginx 404 page not found.

I've read about nuxt generate to generate pre rendered pages but is this good to use when dealing on hundreds of records?

Any help, advice, would be much appriciated.

Thanks

Answer 1

You are totally mixed things. First, default mode is universal aka ssr, not spa. Docs

Second, running npm run start needed for universal mode, while in spa mode you just put single html file and route ALL reuqest from nginx to this file.

But if u are using npm run start its a universal app, and u dont host simple html via your nginx, you should setup downstream source for nginx and route all request to node server e.g. default is localhost:3000

Answer 2

At the very beginning you should understand what problems help you solve nuxt.

you can create three types of applications:

1. static page

On the basis of the routing, nuxt generate html files, which are SEO-frendly. This works, for example, for business card pages (main page + several subpages). You get ready-made html files e.g. index.html, contact.html etc.

2. SPA

applications that do not require SEO, but have dynamic paths and interface. Does not use server side rendering. Some methods are unavailable, but still use some of the benefits of nuxt. For example, dynamic routing or many options available in the configuration in nuxt.

3. Universal

allows you to enjoy all the benefits of nuxt.js. With the help of dedicated website methods (fetch, asyncData, nuxtServerInit etc.), it allows you to prepare data on the server side to generate them on the browser side so that they are SEO-friendly.

Therefore, if you need to use dynamic routing, you have to choose between SPA and Universal mode. Check what commands you should USE

Answer 3

Nuxt with static site generation and dynamic routes

Use this approach If you don't know the exact dynamic routes, don't care about SEO for dynamic routes.

In the generate config, define a custom page for SPA fallback:

export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}

Then in Nginx, define the same fallback page for unknown route, like:

location / {
    try_files $uri /custom_sap_fallbackpage.html;
}

In universal mode, use nuxt generate to generate the static site, deploy the dist(default) folder.

In 2.13.0, Nuxt introduced a target: static feature, make sure to check it.

If you set fallback: true, Nuxt will use 404.html as the default fallback page, unless you configure nginx to ignore its own default 404 page, nginx will still show you the default nginx 404 page. As documented in the nuxt doc, some services like Netlify will utilize this behavior for easier SPA integration. Though for nginx, I think a custom fallback page is the easiest way to do the static site and SPA mixing.

In this approach, static page will be pre-rendered, dynamic routes is treated as unknown route for nginx, which use the fallback SPA page to render.

And make sure you properly handle the real unknown route.

For a fixed set of dynamic routes

You can use function to generate the static site

Only want a SPA site

You can use spa mode and refer to the nginx setting showed here