Nuxt dynamic route return 404 after page is reloaded

nuxt generate 404
nuxt check if generate
nuxt routes generate
nuxt generate middleware
nuxt generate not working
nuxt ignore
nuxt dynamic routes
nuxt pregenerate

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

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

Nuxt application returns 404 when dynamic routes are refreshed , When your app is running as a single page app (SPA), everything is happening within that original entry page - you are not actually loading a� I'm using the Express + Nuxt.js starter template. My routes without params works just as they should, but my routes with params doesn't work as soon as I refresh the page - it'll return a 404 response. I have tried with regular Promise too. My code is:

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.

  1. 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.

  1. 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

Route with param returns 404 on refresh � Issue #2240 � nuxt/nuxt.js , My routes without params works just as they should, but my routes with params doesn't work as soon as I refresh the page - it'll return a 404� i can confirm when developing a static site in nuxt locally, every so often hot-update.json throws a 404 status and makes the page freak out and reload constantly. re-running npm run dev in my scenario resolves this but its pretty gnarly when this issue/bug happens.

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.

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

SEO is a priority for the project

You must use SSR in Nuxt, which is the universal mode.

Only a SPA site

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

SPA Build 404 on refresh dynamic route � Issue #6088 � nuxt/nuxt.js , I am new to Nuxt. SPA Build 404 on refresh dynamic route #6088 When running npm run dev I can go to mysite.test/posts/slug-1 and I get the page I want. your webserver to that fallback html as a catch all route. https://nuxtjs.org/api/ configuration-generate#fallback Reload to refresh your session. We have to let Nuxt know about the dynamic files with the generate command in nuxt.config.js. This command will expect a function that will return a promise that resolves in an array that will look like this: export default { generate: { routes: [ '/product/1', '/product/2', '/product/3' ] } }

The validate Method, Nuxt.js lets you define a validator method inside your dynamic route It will be called server-side once (on the first request to the Nuxt app) and If the validate method does not return true , Nuxt.js will automatically load the 404 error page. The page contains a form that will switch form with success page after filling. Sometimes users would like to refresh the page by clicking the logo/router-link. But when current page is active the router wont refresh the page.

Routing, Warning: dynamic routes are ignored by the generate command when using Nuxt <= v2.12 Note: Handling 404 pages is now up to the logic of the _.vue page. If the validate method does not return true or a Promise that resolve to true, or throws an Error, Nuxt.js will automatically load the 404 error page or 500 error page in case of an error. More information about the validate method: API Pages validate

Release Notes, #7766 nuxt-link prefetch error on fallback page; #7718 Handle fallback on generated page; #7723 Don't #7776 Avoid duplicate slashes for routes ending with hash #7608 Listen to a random port for export and generate (resolves # 7597) #7267 Improve module not found error; #7131 Join with os native sep in resolver. Nuxt.js lets you define a validator method inside your dynamic route component (In this example: pages/users/_id.vue). If the validate method does not return true, Nuxt.js will automatically load the 404 error page. export default { validate({ params }) { // Must be a number return /^\d+$/.test(params.id) } }