Nuxt.js: Documentation confusion for generate

Created on 9 Mar 2019  路  4Comments  路  Source: nuxt/nuxt.js

Version

v2.4.5

Reproduction link

https://nuxtjs.org/guide/commands

Steps to reproduce

First off - please note that I'm reporting a documentation issue. "Reproduction link" doesn't necessarily make sense in that case but I've included the link to the docs in question.

The docs say this about generate and dynamic routes:

"If you have a project with dynamic routes, take a look at the generate configuration to tell Nuxt.js how to generate these dynamic routes."

The link there goes to here: https://nuxtjs.org/api/configuration-generate. And that page says, very clearly:

"Dynamic routes are ignored by the generate command."

However when I tested a simple app with dynamic routes, the generate command created a SPA that worked perfectly. I did some Googling and found this Reddit post mentioning the same behavior:

https://www.reddit.com/r/Nuxt/comments/9wy72h/i_can_still_access_dynamic_route_params_with_nuxt/

So I guess my question/issue is: Is this expected, and if so, shouldn't the docs make it clear? Btw I'd be happy to help write those docs, but I just wanted to be sure.

As a followup, if the generate command is seeing the dynamic routes and auto creating a SPA, does this mean I can't not create a SPA? Like if I set up a generate config and want a non-SPA static app, will I be able to if the generate command seems to force it anyway?

What is expected ?

The docs to mention that it will work with SPA.

What is actually happening?

It's not. :)

This bug report is available on Nuxt community (#c8795)
bug-report

All 4 comments

Hey :wave:

First off - please note that I'm reporting a documentation issue. "Reproduction link" doesn't necessarily make sense in that case but I've included the link to the docs in question.

Feel free to do so in the https://github.com/nuxt/docs/ repo next time if it's directly linked to the docs :relaxed:


Regarding your question

If you use nuxt generate, you usually want a statically generated page. That means, having one HTML file per route which contains actual HTML which was rendered by the server.

You want that because it'll give you the "best of both worlds", good SEO, faster TTI and so on but without running a Node.js server all the time. (Further read)

If you want a traditional SPA, you typically have just one index.html file with almost no HTML but Javascript included.

Source code of a typical SPA
image

Dynamic routes

When you "pre-render" (=== statically generate) your page, Nuxt needs the information which routes it should render. For routes without parameters that's easy (e.g. about.vue or posts/index.vue). As soon as there are dynamic parameters, Nuxt can't "guess" them.

So yes, dynamic routes are "ignored" because Nuxt don't know what do to with them except you tell Nuxt which routes to pre-render.

These routes will then be generated. This does not mean that you can't access dynamic routes that you didn't provide to Nuxt. You can still access them (example: a post that doesn't exists) and the requests will be parsed (depending on your server config and whether you have generate.fallback enabled or not) but you lose the SEO benefit and see a spinner as the fallback file is equivalent to the index.html from your traditional SPA.

Hope that helped :relaxed:

This does help! Everything you said makes sense, however, don't you agree that the docs lead one to believe that you must use a custom generate config option in order to support dynamic routes?

Btw if you (or others) agree, I'll definitely open a new bug on the other repo.

@cfjedimaster I agree that it's not the best phrasing and might be misleading. Feel free to send a Pull Request to change that if you want :+1: :relaxed:

Ok thank you - please feel free to close this as a non issue and I'll refile when I've got a bit more time. (Refile and then work on a PR.)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

maicong picture maicong  路  3Comments

vadimsg picture vadimsg  路  3Comments

lazycrazy picture lazycrazy  路  3Comments

mikekidder picture mikekidder  路  3Comments

shyamchandranmec picture shyamchandranmec  路  3Comments