dynamic routes working but have 404 status code | Nuxt | Page 1

foggy flint Feb 21, 2023, 8:58 AM

#

Hi all!
So I have an SEO problem here as a result of this . Even though the pages are rendering perfectly the status is 404. If anyone has insight would be very gratefull

wispy prawn Feb 21, 2023, 9:10 AM

#

Hi, does this happen on devserver? locally build preview? or deployed build?

foggy flint Feb 21, 2023, 9:32 AM

#

hey! good question, i was about to add that 🙂

#

only on staging site

#

https://computravel-staging.netlify.app/packages/100013/indaba-hotel

#

take a look in netwrok tab

#

@sour radish

#

so yeh deployed build on netlify

gentle kestrel Feb 21, 2023, 9:39 AM

#

Does this happen on every page? @foggy flint

foggy flint Feb 21, 2023, 9:40 AM

#

every instance of this '/packages/[ref]/[slug] route

gentle kestrel Feb 21, 2023, 9:41 AM

#

Do you have any custom Nitro Configuration?

foggy flint Feb 21, 2023, 9:42 AM

#

no

gentle kestrel Feb 21, 2023, 9:44 AM

#

And this does not happen on Dev Mode, right?

foggy flint Feb 21, 2023, 9:44 AM

#

right

gentle kestrel Feb 21, 2023, 9:45 AM

#

Can you show me npx nuxi info output & your nuxt.config?

foggy flint Feb 21, 2023, 9:45 AM

#

config:

gentle kestrel Feb 21, 2023, 9:46 AM

#

okay, delete the message. Just leaked your Directus Token.

foggy flint Feb 21, 2023, 9:46 AM

#

```- Operating System: Darwin

Node Version: v16.12.0
Nuxt Version: 3.2.0
Nitro Version: 2.2.2
Package Manager: [email protected]
Builder: vite
User Config: app, modules, buildModules, routeRules, css, image, runtimeConfig, googleFonts, sitemap, directus
Runtime Modules: @funken-studio/[email protected], @nuxtjs/[email protected], [email protected], @pinia/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], [email protected]
Build Modules: @nuxtjs/[email protected], `@nuxtjs/sitemap```

foggy flint Feb 21, 2023, 9:47 AM

#

gentle kestrel okay, delete the message. Just leaked your Directus Token.

oops true ! 😆

gentle kestrel Feb 21, 2023, 9:47 AM

#

Does one of the modules can cause the error?

foggy flint Feb 21, 2023, 9:48 AM

#

hmm well i just saw i can get rid of the sitemap one. trying that

gentle kestrel Feb 21, 2023, 9:48 AM

#

Are you prerendering the pages?

foggy flint Feb 21, 2023, 9:49 AM

#

yes , ssr is default value so true

gentle kestrel Feb 21, 2023, 9:49 AM

#

And you are deploying with nuxi generate?

foggy flint Feb 21, 2023, 9:49 AM

#

yes

gentle kestrel Feb 21, 2023, 9:49 AM

#

Okay, can you show me your Dynamic Page?

foggy flint Feb 21, 2023, 9:51 AM

#

📎 slug.vue

gentle kestrel Feb 21, 2023, 9:53 AM

#

Just for debugging, Can you remove line 71 to 75

#

And try it with that

foggy flint Feb 21, 2023, 9:53 AM

#

yes i actuaky have tried that

#

same behaviour

gentle kestrel Feb 21, 2023, 9:54 AM

#

Hmm

#

Anything else where you throw a 404 error?

wispy prawn Feb 21, 2023, 9:55 AM

#

Does it happen on other routes too? Or only on this?

foggy flint Feb 21, 2023, 9:55 AM

#

no, only this

#

the only other 404 is any invalid route, which returns my error.vue component in the root directory

gentle kestrel Feb 21, 2023, 9:57 AM

#

Try to remove it

#

And show us your error.vue

wispy prawn Feb 21, 2023, 9:58 AM

#

Yeah that's interesting since you've said that the page itself is rendering fine. It's just netlify server returning 404. It looks to me that netlify isn't configured properly, meaning that it does not detect this route to be there. Sometimes for static sites you have to tell netlify that every subroute is valid, even though you don't have html files in there.

#

Can you do a nuxt generate locally and check whether there are html files in there?

gentle kestrel Feb 21, 2023, 9:59 AM

#

Maybe you try to deploy on an other service?

foggy flint Feb 21, 2023, 9:59 AM

#

ok with npx nuxi generate?

gentle kestrel Feb 21, 2023, 9:59 AM

#

Yes

wispy prawn Feb 21, 2023, 9:59 AM

#

Do you have another dynamic route in your project? Or is this the only one

foggy flint Feb 21, 2023, 10:00 AM

#

the only one

#

oh actually i have blogs

#

good point

wispy prawn Feb 21, 2023, 10:00 AM

#

check if thats the same there

#

and check the build logs, it should exactly list which pages are being generated

foggy flint Feb 21, 2023, 10:01 AM

#

yup https://computravel-staging.netlify.app/article/bengal-tigers-abound-and-cheetahs-roam-the-awe-inspiring-great-karoo

gentle kestrel Feb 21, 2023, 10:02 AM

#

Okay maybe a netlify problem with the dynamic routes.

#

Did you tested it locally?

foggy flint Feb 21, 2023, 10:02 AM

#

building now

#

interesting

#

no package html , or blogs html

gentle kestrel Feb 21, 2023, 10:04 AM

#

How do you mean that?

#

They doesn't exist?

#

Can you show us the output of nuxi generate

foggy flint Feb 21, 2023, 10:04 AM

#

no. folders for all stic pages but not the dynamic ones

#

📎 message.txt

gentle kestrel Feb 21, 2023, 10:05 AM

#

If you try to test it local, using serve or something else. Do you also get the 404?

foggy flint Feb 21, 2023, 10:05 AM

#

no i dont

gentle kestrel Feb 21, 2023, 10:05 AM

#

How do you start it locally?

foggy flint Feb 21, 2023, 10:06 AM

#

yarn dev

gentle kestrel Feb 21, 2023, 10:08 AM

#

Static site generation (SSG) with ssr: true pre-renders routes of your application at build time. (This is the default behaviour when running nuxi generate.) It will also generate /200.html and /404.html single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host).

#

@foggy flint Are you using the nitro netlify preset?

foggy flint Feb 21, 2023, 10:08 AM

#

hmm no sounds good!

gentle kestrel Feb 21, 2023, 10:10 AM

#

Add this to your nuxt.config

nitro: {
    preset: 'netlify'
}

#

But actually, this should be zero-config.

#

So I think the fallback routes are our problem

#

If this doesnt change anything, try to locally start the static output.

npx serve -s .output/public

foggy flint Feb 21, 2023, 10:13 AM

#

ok

#

you guys rock btw

#

ok have pushed the nitro preset in the meantime

gentle kestrel Feb 21, 2023, 10:15 AM

#

Same problem

foggy flint Feb 21, 2023, 10:15 AM

#

ah you checked?

gentle kestrel Feb 21, 2023, 10:16 AM

#

Yes

foggy flint Feb 21, 2023, 10:16 AM

#

serving static output, no 404!

gentle kestrel Feb 21, 2023, 10:16 AM

#

okay, its a deployment problem.

#

I think the nitro netlify preset needs more specific configuration for dynamic routes.

#

Let me check something.

foggy flint Feb 21, 2023, 10:17 AM

#

ok

gentle kestrel Feb 21, 2023, 10:18 AM

#

Can you show me your netlify configuration, so the configured commands?

foggy flint Feb 21, 2023, 10:19 AM

#

gentle kestrel Feb 21, 2023, 10:19 AM

#

How does Netlify start it?

foggy flint Feb 21, 2023, 10:20 AM

#

oh after the build ? hmm

gentle kestrel Feb 21, 2023, 10:21 AM

#

Yes

#

Is there a 200.html file in your static output? @foggy flint

foggy flint Feb 21, 2023, 10:27 AM

#

yes

gentle kestrel Feb 21, 2023, 10:27 AM

#

And a 404.html?

foggy flint Feb 21, 2023, 10:27 AM

#

yup

gentle kestrel Feb 21, 2023, 10:28 AM

#

okay

foggy flint Feb 21, 2023, 10:28 AM

#

not sure how netlify starts it. Maybe i should try vercel

gentle kestrel Feb 21, 2023, 10:31 AM

#

You can try that, and it will certainly work. But still, it's not right.

foggy flint Feb 21, 2023, 10:32 AM

#

ok sso thinknig it through, dynamic routes obviously cant get prerendered. So as in my local build , they should be rendered in real time and not have 404 status

gentle kestrel Feb 21, 2023, 10:33 AM

#

Maybe you make them ClientOnly if this is not a problem

#

But in every case, this problem should be documented.

foggy flint Feb 21, 2023, 10:34 AM

#

I know right

#

but let me try that, just wrap the page in <ClientOnly>?

gentle kestrel Feb 21, 2023, 10:35 AM

#

Yes

#

I will create an example on GitHub and try to find a solution for this issue.

foggy flint Feb 21, 2023, 10:36 AM

#

thanks so much

gentle kestrel Feb 21, 2023, 10:36 AM

#

No Problem

#

Let me know if the ClientOnly helps

wispy prawn Feb 21, 2023, 10:43 AM

#

@foggy flint Actually, when doing nuxt generate, also dynamic routes are getting prerendered. For example, my [slug].vue blog page looks like this on build:

ℹ Prerendering 7 initial routes with crawler
  ├─ / (1756ms) 
  ├─ /blog (1608ms) 
  ├─ /contact (941ms) 
  ├─ /datenschutz (1028ms) 
  ├─ /200.html (3ms) 
  ├─ /404.html (2ms) 
  ├─ /robots.txt (2ms) 
  ├─ /about (1001ms) 
  ├─ /blog/how-to-integrate-calendly-in-nuxt-3 (1456ms) 
  ├─ /blog/how-to-create-a-nuxt-3-headless-website-with-wordpress (1465ms)

and they are like rendered as html pages inside my output.

gentle kestrel Feb 21, 2023, 10:44 AM

#

@foggy flint How do you named the slug file?

foggy flint Feb 21, 2023, 10:45 AM

#

gentle kestrel Feb 21, 2023, 10:46 AM

#

Try to name it just: [slug].vue

foggy flint Feb 21, 2023, 10:46 AM

#

it used to be like that

wispy prawn Feb 21, 2023, 10:46 AM

#

Any reasons why there is double [[ref]]?

foggy flint Feb 21, 2023, 10:46 AM

#

the docs say that makes is optional

#

was trying it out

wispy prawn Feb 21, 2023, 10:47 AM

#

Okay but optional + something dynamic inside idk if that works, maybe that's the reason

foggy flint Feb 21, 2023, 10:48 AM

#

ok going back to simple naming now

gentle kestrel Feb 21, 2023, 10:48 AM

#

I will try to reproduce this error with netlify

gentle kestrel Feb 21, 2023, 10:48 AM

#

wispy prawn Okay but optional + something dynamic inside idk if that works, maybe that's the...

Not really

#

When he trys to serve it locally it works

wispy prawn Feb 21, 2023, 10:48 AM

#

I know

gentle kestrel Feb 21, 2023, 10:48 AM

#

I think its a problem with the Netlify configuration

wispy prawn Feb 21, 2023, 10:48 AM

#

but the generator may not catch it as something to generate

gentle kestrel Feb 21, 2023, 10:48 AM

#

Hmm

wispy prawn Feb 21, 2023, 10:48 AM

#

because you should have .html files

#

and because you don't, netlify throws 404 but still shows the page because of nuxt maybe generating it dynamically client side

foggy flint Feb 21, 2023, 10:49 AM

#

yes right, but how are yours getting generated. the slug title are coming from links in the site right

gentle kestrel Feb 21, 2023, 10:50 AM

#

#

I have the same problem

#

I can reproduce it

#

https://63f4a1b629492046dabdf3bb--teal-macaron-c40213.netlify.app/packages/Test

#

https://github.com/Intevel/nuxt-netlify-404

#

With a normal dynamic page @wispy prawn

wispy prawn Feb 21, 2023, 10:51 AM

#

Okay thanks for trying out.

#

@foggy flint can you try one thing. open a url with view-source: before in chrome and try to search for some of your page content

#

Is that html actually in there? Or is it just an empty page

#

Trying to check if your page gets delivered empty and the client renders it. Because that would be very bad for SEO, being SPA-mode.

foggy flint Feb 21, 2023, 10:53 AM

#

ok

gentle kestrel Feb 21, 2023, 10:54 AM

#

wispy prawn <@667702738280251402> Actually, when doing `nuxt generate`, also dynamic routes ...

In my example it does not create a html file for the slug

foggy flint Feb 21, 2023, 10:55 AM

#

hmm

wispy prawn Feb 21, 2023, 10:55 AM

#

If you want these routes to be dynamic and they cannot be statically rendered, I guess you have to use nuxt build and do a route rules to define which should be static and which not https://nuxt.com/docs/guide/concepts/rendering#route-rules

wispy prawn Feb 21, 2023, 10:55 AM

#

gentle kestrel In my example it does **not** create a html file for the slug

Yeah maybe that only works when these pages are linked somewhere (in my case the blog posts are linked on another page)

foggy flint Feb 21, 2023, 10:55 AM

#

hmm

gentle kestrel Feb 21, 2023, 10:56 AM

#

I think its a netlify problem

#

A configuration problem

#

Not a Nuxt related Issue.

foggy flint Feb 21, 2023, 10:56 AM

#

wispy prawn Yeah maybe that only works when these pages are linked somewhere (in my case the...

exactly, and my routes have like 300 instances , not avail in the front end

wispy prawn Feb 21, 2023, 10:56 AM

#

You can configure netlify to not return a 404 by adding this: https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

Rewrites and proxies

Use rewrite rules to fetch a location behind the scenes while the URL in the visitor’s address bar remains the same. Proxy to another service or site.

#

But that's not a solution, since it's still bad for seo when your pages generate only client-side

#

What did the view-source: show?

gentle kestrel Feb 21, 2023, 10:57 AM

#

I think we have to optimize the Nitro Netlify Preset

gentle kestrel Feb 21, 2023, 10:57 AM

#

wispy prawn What did the `view-source:` show?

HTML Output

wispy prawn Feb 21, 2023, 10:57 AM

#

gentle kestrel I think its a netlify problem

it's kind of both, they correlate 😄

gentle kestrel Feb 21, 2023, 10:58 AM

#

gentle kestrel HTML Output

view-source:https://63f4a1b629492046dabdf3bb--teal-macaron-c40213.netlify.app/packages/Test

foggy flint Feb 21, 2023, 10:58 AM

#

📎 message.txt

gentle kestrel Feb 21, 2023, 10:58 AM

#

foggy flint

Yes

#

I will deploy this example on vercel.

wispy prawn Feb 21, 2023, 10:59 AM

#

For me it only shows an empty html page

#


<!DOCTYPE html>
<html >
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.5670447a.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.4a691e1d.js"></head>
<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/_nuxt/entry.5670447a.js" crossorigin></script></body>
</html>

#

Which is bad for SEO

#

So it's not only a netlify problem, but also you have empty pages which then just work because they client-side render.

gentle kestrel Feb 21, 2023, 10:59 AM

#

wispy prawn Which is bad for SEO

Surely it is, but that's not really the problem.

#

The 404 does not show up on vercel

#

view-source:https://nuxt-netlify-404.vercel.app/packages/test

wispy prawn Feb 21, 2023, 11:00 AM

#

okay, then just configure netlify rewrite I guess https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

Rewrites and proxies

Use rewrite rules to fetch a location behind the scenes while the URL in the visitor’s address bar remains the same. Proxy to another service or site.

gentle kestrel Feb 21, 2023, 11:00 AM

#

gentle kestrel view-source:https://nuxt-netlify-404.vercel.app/packages/test

Checkout this @wispy prawn

#

There is html content

#

It is a Netlify Problem

wispy prawn Feb 21, 2023, 11:01 AM

#

gentle kestrel There is html content

Interesting

gentle kestrel Feb 21, 2023, 11:01 AM

#

Creating an Issue on Nitro Repository?

wispy prawn Feb 21, 2023, 11:01 AM

#

What did the vercel logs tell about the generation of html?

gentle kestrel Feb 21, 2023, 11:01 AM

#

Wait.

foggy flint Feb 21, 2023, 11:01 AM

#

wow

wispy prawn Feb 21, 2023, 11:02 AM

#

Maybe vercel is a bit more intelligent and knows how to render stuff dynamically on the server, therefore not returning 404 and returning content inside view-source

gentle kestrel Feb 21, 2023, 11:02 AM

#

wispy prawn Maybe vercel is a bit more intelligent and knows how to render stuff dynamically...

Vercel has a own Nitro Preset

#

Its building different I think

foggy flint Feb 21, 2023, 11:02 AM

#

yes

gentle kestrel Feb 21, 2023, 11:02 AM

#

okay no

#

wait

wispy prawn Feb 21, 2023, 11:03 AM

#

@gentle kestrel did you use nuxt generate?

foggy flint Feb 21, 2023, 11:03 AM

#

but in my case it would not have all the ref numbers to prerender with

gentle kestrel Feb 21, 2023, 11:03 AM

#

The logs says it uses nuxt build. But I can't overwrite it to nuxt generate

foggy flint Feb 21, 2023, 11:04 AM

#

hmm

wispy prawn Feb 21, 2023, 11:04 AM

#

gentle kestrel The logs says it uses nuxt build. But I can't overwrite it to nuxt generate

you can in the vercel settings

gentle kestrel Feb 21, 2023, 11:04 AM

#

No

#

I cant change it there

foggy flint Feb 21, 2023, 11:04 AM

#

maybe nuxt build on netlify would work

gentle kestrel Feb 21, 2023, 11:04 AM

#

It thinks its the same

#

Wait

wispy prawn Feb 21, 2023, 11:04 AM

#

@foggy flint probably it will work yes

gentle kestrel Feb 21, 2023, 11:04 AM

#

Can't use the Save button

#

when I try overwrite

foggy flint Feb 21, 2023, 11:05 AM

#

maybe they know this problem

wispy prawn Feb 21, 2023, 11:05 AM

#

no way, that's a vercel bug

#

so many bugs today hahah

gentle kestrel Feb 21, 2023, 11:05 AM

#

wispy prawn no way, that's a vercel bug

No I think not

wispy prawn Feb 21, 2023, 11:06 AM

#

@gentle kestrel But why would this save button be disabled?

gentle kestrel Feb 21, 2023, 11:06 AM

#

Because its the same

#

With the vercel preset it also prerenders the routes

#

And gives a static output

wispy prawn Feb 21, 2023, 11:07 AM

#

Can you send in the full build log?

#

To see what it does exactly

gentle kestrel Feb 21, 2023, 11:08 AM

#

📎 message.txt

foggy flint Feb 21, 2023, 11:08 AM

#

woohoo, changin to nuxt build has fixed it

gentle kestrel Feb 21, 2023, 11:09 AM

#

Yes, as @wispy prawn said. But then its a problem with Nuxi generate

foggy flint Feb 21, 2023, 11:09 AM

#

you guys are super ninjas and Jedi masters

#

yes

wispy prawn Feb 21, 2023, 11:09 AM

#

Okay so I guess let's create an issue at nuxt/nuxt about nuxt generate?

#

Since it's in experimental state maybe this can be improved

foggy flint Feb 21, 2023, 11:10 AM

#

ok so i have now lost my prerendering?

wispy prawn Feb 21, 2023, 11:10 AM

#

foggy flint ok so i have now lost my prerendering?

yeah that's the downside of using nuxt build

foggy flint Feb 21, 2023, 11:10 AM

#

yes i see

wispy prawn Feb 21, 2023, 11:10 AM

#

foggy flint ok so i have now lost my prerendering?

try to use routeRules to improve that https://nuxt.com/docs/guide/concepts/rendering#route-rules

foggy flint Feb 21, 2023, 11:11 AM

#

yes ok

wispy prawn Feb 21, 2023, 11:11 AM

#

But even with that I guess you are not going to be able to enable prerendering

foggy flint Feb 21, 2023, 11:11 AM

#

yes

#

well worth raising an issue right?

wispy prawn Feb 21, 2023, 11:11 AM

#

yeah I think so

foggy flint Feb 21, 2023, 11:14 AM

#

basically you need some smart config to combine the statig generation and the dynamic, SPA style routes. I have a script that hits the backend ob build to fetch data and build all the urls for the sitemap.

gentle kestrel Feb 21, 2023, 11:14 AM

#

Who of us will raise the Issue?

foggy flint Feb 21, 2023, 11:15 AM

#

I dont mind but you guys would probably describe it better

gentle kestrel Feb 21, 2023, 11:15 AM

#

I will create an issue and mention you guys

#

@foggy flint Your Github @?

foggy flint Feb 21, 2023, 11:15 AM

#

ok awesome

#

sharkfin009

gentle kestrel Feb 21, 2023, 11:15 AM

#

Thanks

#

https://github.com/nuxt/nuxt/issues/19191

GitHub

`nuxi generate` doesn't prerender dynamic pages · Issue #19191 · nu...

Environment Operating System: Linux Node Version: v18.7.0 Nuxt Version: 3.2.2 Nitro Version: 2.2.2 Package Manager: [email protected] Builder: vite User Config: - Runtime Modules: - Build Modules: - Repro...

#

@foggy flint Daniel commented, and as @wispy prawn said you'll have to link pages, Nuxt only prerenders pages which gets crawled.

#

You can add you're routes to the nitro.prerender.routes array in your Nuxt Config

wispy prawn Feb 21, 2023, 11:34 AM

#

Seems fair

#

So maybe add a function that fetches a list of all the routes from the server before build

foggy flint Feb 21, 2023, 11:49 AM

#

awesome, will work on that

#

why no prob on vercel

#

oh because no prerender, sorry

foggy flint Feb 21, 2023, 1:29 PM

#

view-source:https://computravel-staging.netlify.app/sitemap.xml

#dynamic routes working but have 404 status code