Αυτόματη επαναφορά cache στο build του React

Θα πρέπει ήδη να γνωρίζετε ότι στα browsers υπάρχει το πρόβλημα της cache στα static αρχεία. Η ουσία του προβλήματος είναι ότι για να αυξηθεί η ταχύτητα, το browser κρατάει στην cache αρχεία styles, scripts και εικόνων.

Αυτό σημαίνει ότι αν στον hosting αλλάξετε κάτι στα scripts ή στα styles σας, οι αλλαγές θα εμφανιστούν μόνο στους νέους επισκέπτες του site. Οι παλιοί επισκέπτες, που έχουν ήδη επισκεφτεί το site προηγουμένως, θα βλέπουν την εκδοχή του κώδικα που έχει αποθηκευτεί στην cache. Αυτό, φυσικά, είναι απαράδεκτο.

Ευτυχώς, στο React αυτό το πρόβλημα επιλύεται αυτόματα. Η λύση του consiste στο γεγονός ότι τα αρχεία του build, εκτός από το όνομα και την επέκταση, έχουν μια τυχαία συμβολοσειρά, που ονομάζεται hash. Αυτό το hash αντιστοιχεί στο περιεχόμενο του αρχείου. Αυτό σημαίνει ότι όταν αλλάζει ο κώδικας στο αρχείο, θα αλλάζει και το hash στο όνομά του. Έτσι, το browser θα νομίζει ότι είναι ένα νέο αρχείο και θα το κατεβάσει.

Μπορούμε να παρατηρήσουμε τα hash των αρχείων όταν συνδέονται στο index.html: