Nuxt.js refresh url get 404 not found

Question

I have one problem on my nuxt.js project.

I create dynamic page like https://samplesite.com/place/{place_id} which place_id dynamic value. (I have around 4,000+ places in my database)

after I run npm run generate and get /dist folder, then I push this folder to amazon EC2.

Everything work well, when I click a like on index page to /place/{place_id} page, website show place information.

But when I push refresh button on web browser, the page /place/{place_id} show 404 not found.

Do you have any solution to fix this problem?

I read on nuxt.js website, they said I need to generate dynamic page but my place is about 4,000 places, I think it's impossible to generate all of place page.

Please tell me what should I do.

Answer 1

Do you have a fix set of dynamic routes?

If you do, you can use function to generate the static site

In 2.13.0, `nust` introduced a `target: static` feature, make sure to 
check [it](https://nuxtjs.org/blog/going-full-static) out.

Do you care about the SEO?

If you do care the SEO, you can use SSR in Nuxt, which is the universal mode. The other choice is the above static site genration

Do you have a SPA site?

If you do, you can use spa mode and refer to the nginx setting showed here

If you don't know the exact dynamic routes, don't care about SEO for dynamic routes, you can combine the static site generation with dynamic routes.

In universal mode, use nuxt generate to generate a static site.

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;
}

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. I think a custom fallback page is the easiest way to do the static site generation 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.

Answer 2

create a .htaccess file and put the below code into it.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>