web-dev-qa-db-fra.com

Cache de cache avec l'application de création de réaction

Lorsque j'ai mis à jour mon site, exécutez npm run build et téléchargez les nouveaux fichiers sur le serveur. Je recherche toujours l'ancienne version de mon site. Le repo de mon projet est https://github.com/Alfrex92/serverlessapps

Sans React, je peux voir la nouvelle version de mon site avec suppression du cache. Je fais ça: 

Fichier précédent 

<link rel="stylesheet" href="/css/styles.css">

Nouveau fichier 

<link rel="stylesheet" href="/css/styles.css?abcde">

Comment puis-je faire quelque chose comme cela ou obtenir une suppression du cache avec l'application create react?

Il y a beaucoup de discussions dans le github de create react app à ce sujet, mais personne n’a de réponse correcte/simple. 

reactjscachingreact-reduxcreate-react-app
18
Alfrex92

C'est probablement à cause de votre travailleur Web.

Si vous regardez dans votre fichier index.js, vous pouvez voir 

registerServiceWorker();

Jamais demandé ce qu'il a fait? Si nous jetons un coup d'œil au fichier importé, nous pouvons voir 

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.

Si vous souhaitez supprimer le travailleur Web, ne supprimez pas simplement la ligne. Importez désinscrire et appelez-le dans votre fichier au lieu du registre.

import { unregister } from './registerServiceWorker';

et dire appeler 

unregister()

P.S. Lorsque vous vous désinscrivez, il faudra au moins une actualisation pour que cela fonctionne.

EDIT: create-react-app v2 a maintenant le service worker désactivé par défaut

30
Kerry Gougeon

J'ai eu le même problème lorsque j'utilise create-react-app (et que je le déploie sur heroku). Il continue à montrer l'ancienne version de mon application ????.

J'ai trouvé que le problème semble venir du navigateur. Il met en cache mon ancien index.html avec son bundle js obsolète.

Vous voudrez peut-être ajouter ce qui suit à votre en-tête de réponse côté serveur 

"Cache-Control": "no-store, no-cache"

ou si vous utilisez également heroku create-react-app-buildpack, mettez à jour le fichier static.json

"headers": { 
    "/**": { 
        "Cache-Control": "no-store, no-cache" 
    } 
}

Je pense que de cette façon, vous pouvez toujours garder ce travailleur de service médiocre ????, et le dernier contenu sera affiché sur la charge N + 1 (deuxième rafraîchissement) 

J'espère que cela t'aides...

6
Ryan Chu

Il semble qu'ils soient passés de opt-out à opt-in en ce qui concerne le prestataire de services. Voici le commit qui a changé le README et il a des exemples similaires à la réponse de Kerry G:

https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad

1
squarism