CODEWITHSUNDEEP
vue.jsroutessingle-page-applicationnuxt.js
user3869231
user3869231

Reputation: 342

Nuxt generate is keeping my dynamic routes working

I am using nuxt for a static webapp, using "mode: spa" and "nuxt generate".

The docs say that dynamic routes do not work with this, but my app (/dist) still works on static server after generating, even though the routes aren't generated. I cant figure out why.

Before generating, my routes look like:

export function createRouter () { return new Router({ mode: 'history', base: '/', routes: [ { path: "/", component: _36d3a217, name: "index" }, { path: "/:focus", component: _fbe76838, children: [ { path: "", component: _6d415767, name: "focus" }, { path: ":view", component: _19cdee48, name: "focus-view" } ] } ], fallback: false }) }

Now, the generated /dist does not create the /focus directory as expected...But In my app, I am using route URL params to query an API and it still works.

ie a route like below, the component will use "thisFocus" and "thisView" as parameters in the API:

/thisFocus/thisView

Since the dynamic routes do not exist in /dist, i would think that this would not work anymore. So how does the app still use those URL params successfully without the routes existing?

Edit: another more simple way to ask maybe: why can i still access /:focus/:view route.params even though the routes dont exist?

Upvotes: 1

Views: 3548

Answers (1)

Anima-t3d
Anima-t3d

Reputation: 3565

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.

Source: Replied on github by manniL who is a nuxt core member

Upvotes: 2

Related Questions