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

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 2

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