Nuxt.js: Nuxt page fn $forceUpdate exists when running in dev mode but not in prod (build, start) [nuxt-edge]

[hartmut-co-uk]

Version

v1.4.0

Reproduction link

https://github.com/hartmut-co-uk/nuxt-forceupdate-bug-reproduce

Steps to reproduce

Hi, please follow reproduction link provided.

_) git clone https://github.com/hartmut-co-uk/nuxt-forceupdate-bug-reproduce.git
A.1) start the app via yarn run dev
A.2) open start page, use (click) buttons - in particular top button from layout - '[page.$forceUpdate from layout]'
A.3) check console / store / $store.state.random template rendered output
A.4) the button from layout '[page.$forceUpdate from layout]' does invoke the $forceUpdate - triggering the page fetch method -> store commit -> state change..

B.1) build and start the app in prod mode via yarn run build && yarn start
B.2) open start page, use (click) buttons - in particular top button from layout - '[page.$forceUpdate from layout]'
B.3) check console / store / $store.state.random template rendered output
B.4) doesn't work...

What is expected ?

A.4) & B.4) should result in the same behaviour client side.
running nuxt in built / prod mode should allow to call this.$refs.page.$forceUpdate()

What is actually happening?

it's working in dev mode, not in prod mode

Additional comments?

This has been setup & tested in nuxt-edge

Please ask if any questions!

Usage scenario: from layout page header bar - I have a global 'create' which doesn't do a route change but allows creating (http POST) new elements via API - and after success redirect / reload current page - which is not a route change - but should invoke the page's fetch method to re-fetch data from API (via store..)

_{This bug report is available on Nuxt community (#c7337)}

[hartmut-co-uk]

Note: I'm actually doing sth like the following in addition:

let to = '/my/route/to'    // this is dynamic in my code...
if (this.$router.currentRoute.path === to) {
  this.$refs.page.$forceUpdate()
} else {
  this.$router.push(to)
}

So to further lay out my usage scenario - I've got a way to create a resource from somewhere in the layout (good example: twitter.com page header 'Tweet' button+modal).
After creating the resource I want to either redirect (route-change) to the view I created the resource for - or if already on that route - do a route/page reload (= page component $forceUpdate).

If there's a better way to achieve this - would be great to learn about - but originally explained behaviour still is a bug IMO.

I wonder if it would be doable / worth to add the 'forceUpdate' (optional, default: _false_) as a property directly to the <nuxt-link> component + some helper/wrapper function to do the same via $router.push()?

[hartmut-co-uk]

After further debugging I noticed this seems to be implemented / intended to be a (webpack) dev _hot-reload_ only 'feature'?

https://github.com/nuxt/nuxt.js/blob/dev/lib/app/client.js#L562-L565

So that explains why it's working in dev mode, but not in built / prod mode.

Then could/should this be enabled/executed always to allow component forceUpdates?
Or again is it just the wrong approach and there's a better option to _'force reload'_ the current route client side?
Or essentially even simpler to _force a route change_ $router.push() - even if the route doesn't change (route == current page)? And would that need to be implemented with _nuxt_ or with _vue-router_?

[hartmut-co-uk]

Further I experimented with asyncData, too

asyncData (context) {
      console.log('exec asyncData')
      return { asyncDataRandom: Math.random() }
    }

(added as branch asyncData -> https://github.com/hartmut-co-uk/nuxt-forceupdate-bug-reproduce/tree/asyncData)

Debugging shows the method _is getting called_ via addHotReload, so is applyAsyncData.

BUT the watcher doesn't seem to pick up the data+asyncData merge taking place (https://github.com/nuxt/nuxt.js/blob/dev/lib/app/utils.js#L14-L31)

(nuxt issue)

[galvez]

@manniL @Atinux what @hartmut-co-uk said above seems to be the case, $forceUpdate() will cause a _full reload_ in dev mode because it is especially wired to do so. Don't think this is a bug.

[hartmut-co-uk]

Hi @galvez thanks you - after the debugging I've done I guess it isn't a bug - but would/may it be considered as a feature request instead then?
Or is there a better way to achieve what I'm trying to do (_'force reload'_ the current route client side)

[manniL]

@hartmut-co-uk You could leverage the router: this.$router.go(0)

[hartmut-co-uk]

Hi @manniL will double check again, but I don't think that caused a route 'change' when the route stays the same - and won't trigger nuxt's fetch / asyncData

[hartmut-co-uk]

OK I tested with this.$router.go(0) - triggers an actual browser page reload, served from the server (SSR). That's not what I'm looking for in this case.

[manniL]

@hartmut-co-uk Alright, was worth a try though :relaxed:

[hartmut-co-uk]

any update, could it be considered for nuxt 2.3 maybe? :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[manniL]

Not stale

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[hartmut-co-uk]

Not stale

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[hartmut-co-uk]

can still reproduce on latest version - I might update my example repo to latest stable..

[manniL]

@hartmut-co-uk While this issue persists I'm curious: Why would you need that function? 🤔 (isntead of $router.go()?)

[hartmut-co-uk]

you've already asked above =)
https://github.com/nuxt/nuxt.js/issues/3504#issuecomment-411699088

[manniL]

@hartmut-co-uk Hehe yeah, I read that as well :speak_no_evil:

But for your use-case, a server-rendered response would suffice, wouldn't it?

I have a global 'create' which doesn't do a route change but allows creating (http POST) new elements via API - and after success redirect / reload current page - which is not a route change - but should invoke the page's fetch method to re-fetch data from API (via store..)

[hartmut-co-uk]

it would, but less elegant and less performant vs. just having the according vuex -> API calls triggered (via page fetch) client-side and re-rendering the reactive way..

[hartmut-co-uk]

note: I certainly have various ways to work around / solve this - though I think $forceUpdate would be the best way in terms of separation of concerns, so in my case the layout shouldn't know anything of what's required (vuex actions, API interaction, ...) on the page/route in question to 'refresh'/'update'.
So in general I was just wondering if this couldn't be implemented / enabled for _prod_ mode as well as for _dev_ - as I don't think it's too much code - and to my understanding the _native vue_ $forceUpdate isn't limited to _dev_ mode.

[manniL]

But native $forceUpdate doesn't trigger fetch/asyncData (obviously, as they are custom nuxt commands). Other than that, $forceUpdate should work as intended, right?

[hartmut-co-uk]

correct, but nuxt page components in _dev_ mode do trigger fetch/asyncData - just not in _prod_ mode..

My understanding on the current situation / use case for nuxt is -> it's used for hot reload in dev mode.
So my point is - would it make sense to have nuxt support it as a usable feature rather as a dev tool?!?

[hartmut-co-uk]

https://github.com/nuxt/nuxt.js/blob/3ebd6b707e838012931e07776a0ebdb6495f507c/packages/vue-app/template/client.js#L550-L621

[manniL]

I got that but can't give any more info on that as I simply don't know more about that topic 🙈 ☺️

[Atinux]

Hi @hartmut-co-uk

Thank you for this bug report / feature request.

Actually, I never expected that someone will actually use this.$forceUpdate() 😄
It is intended only for HMR in development actually.

I am working on the new asyncData that can call methods directly (have access to this).
This way, you should be able to create a method (maybe name reload or $reload) that fetch the data to reload directly in your page and call it when you do this kind of changes (POST request).

[hartmut-co-uk]

Thx @Atinux - I'm happy with that.
I raised it as a bug initially (when I was unaware that it's a HMR feature) mainly because the vue native $forceUpdate() isn't an _HMR only_ feature and there was no existing/additional documentation on the nuxt page available.

I think it could just be shipped with the prod build to allow it to be used - or alternatively an out-of-the-box 'reloadPage' method for _page components_ which will trigger fetch & asyncData?

Though not sure if there's enough demand to justify..

I'm on latest nuxt2 in the meantime and my UX design has changed - so I no longer have an use-case myself. Before that I've simply had invoked the according store action which was called from the page component's fetch manually. Having the page specific logic in the layout impl. wasn't great but working and along with comments ~~OK... :-)

Feel free to close if you don't want to fix / add as a feature.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[Atinux]

With nuxt-edge or the next release v2.9.0, you will be able to use $nuxt.refresh() @hartmut-co-uk

See: https://github.com/nuxt/nuxt.js/pull/6194

Sorry for the delay!

[manniL]

As it's already available in nuxt-edge, I'd close here. People can always refer to #6194 or v2.9.x and after :relaxed:

[hartmut-co-uk]

🏆 Thanks a lot @Atinux + team - I just found out while reading the v2.9.0 release notes..