Payload cache issue

[campie]

Hi,

First of all, thank you very much for this nuxt module. I found it by reading this.

I'm facing a cache problem whenever I rebuild my app.

Nuxt generate will name each js chunk with some random string (for example, 4e0f06a8ac4f255a8faf.js). However, the names for payload.json and payload.js never change between rebuilds (am I missing something here?) .

When, for example. payload.json changes between rebuilds and the browser has the older file in the cache, it will load the older file from disk and not the updated data from the server.

The client is getting stale data when he or she clicks a nuxt-link.

Any ideas on how to solve this?

[DreaMinder]

Greetings.

payload.json and payload.js never change between rebuilds (am I missing something here?) .

thats right, file names never change.

the browser has the older file in the cache

well yeah, but its not a common practice to set cache-headers for json files. These files shouldn't be cached if you are using this module, thats the only solution for now.

It would be nice to apply hash to payload.json filename, but how would you know this filename when making request? I don't know any simple solutions so far... If you do, lets discuss.

[freddy38510]

I'm suggesting some inspiration from how laravel mix handles assets versioning.

Could hashed query string added to the filename be a solution in our case ? The hash has to be saved in a separate file. Maybe as json with the route URL as key and hash as value.

https://laracasts.com/discuss/channels/laravel/how-version-really-works-in-laravel-mix

[DreaMinder]

@freddy38510

Maybe as json with the route URL as key and hash as value.

so you suggest to make json file that will have all payload-hashes? OK, but if the file should be hashed itself, how do we know its filename in order to download it on initialization?

I can only think of implementation that injects hash-data into nuxt build, but it looks very complicated and unreliable.

[freddy38510]

If we follow laravel mix example, the filename should no be hashed and the file should not be cached. A unique filename like "manifest.json" is required.

We need to get and parse the content of that file at server side with the generate command, and client side at first request in spa mode i think.

Maybe we should see how Gatsby handles this scenario.

[DreaMinder]

I've implemented something that should help. When versioning: true in options, payload filenames have timestamp. Pushed new version, l think it is the best I can do.

@freddy38510 @campie I would appreciate if you guys tested it and let me know if it works with your projects.

[robertpiosik]

Hey @DreaMinder, your solution with versioning has an issue. If someone is navigating through the website AND in the meanwhile the application will be updated, the user will start receiving 404-not found errors, and the app unfortunately break down.

[DreaMinder]

@robertpiosik yep, this is how versioned\hashed scripts work. I don't see any module-specific solution. Even if I'll solve it, there also will be code-splited chunks of vue components that will break your app same way when navigating accross different routes. Service worker can solve this problem. Or storing old versions of files on static hosting can help too. Or check this solution https://github.com/nuxt/nuxt.js/issues/3389#issuecomment-431609130

[robertpiosik]

@DreaMinder Thanks for clarifying that.