Το SWR (state-while-revalidate) είναι μια μέθοδος ανάκτησης δεδομένων που δημιουργήθηκε από την Vercel. Λειτουργεί λαμβάνοντας πρώτα δεδομένα, στέλνοντας ένα αίτημα ανάκτησης για να τα επικυρώσετε ξανά και, στη συνέχεια, επιστρέφοντας τα ενημερωμένα δεδομένα.
Το SWR είναι πολύ ισχυρό καθώς όχι μόνο επιτρέπει την επαναχρησιμοποιήσιμη ανάκτηση δεδομένων, αλλά έχει επίσης ενσωματωμένη προσωρινή αποθήκευση, σελιδοποίηση και επανεπικύρωση στην εστίαση. Χρησιμοποιώντας το SWR, ένας ιστότοπος εμφανίζει περιεχόμενο προσωρινής αποθήκευσης ενώ ανακτά ενημερωμένο περιεχόμενο στο παρασκήνιο.
Πώς λειτουργεί το SWR;
Κανονικά, θα το έκανες ανάκτηση δεδομένων χρησιμοποιώντας το Axios ή τη μέθοδο ανάκτησης. Αυτές οι μέθοδοι συνδέονται με τον πόρο δεδομένων, ανακτούν και επιστρέφουν τα δεδομένα και στη συνέχεια κλείνουν τη σύνδεση. Ωστόσο, το SWR ανακτά δεδομένα διαφορετικά. Λειτουργεί σε τρία βήματα:
- Επιστρέφει μπαγιάτικα δεδομένα από τη μνήμη cache.
- Στέλνει το αίτημα ανάκτησης για επανεπικύρωση δεδομένων.
- Επιστρέφει ενημερωμένα δεδομένα.
Το SWR δεν αντικαθιστά το fetch API. Αντίθετα, σας επιτρέπει να αποδίδετε προσωρινά αποθηκευμένο περιεχόμενο στον ιστότοπό σας μόλις ο χρήστης επισκέπτεται και να ενημερώνει αυτό το περιεχόμενο όταν είναι μπαγιάτικο.
Πώς γνωρίζει λοιπόν το SWR πότε η κρυφή μνήμη δεν είναι έγκυρη; Μέσω μιας απόκρισης κεφαλίδας ελέγχου προσωρινής μνήμης. Η απάντηση έχει δύο καταστάσεις: φρέσκια και μπαγιάτικη. Μια νέα κατάσταση σημαίνει ότι η κρυφή μνήμη μπορεί να επαναχρησιμοποιηθεί ενώ μια μπαγιάτικη κατάσταση σημαίνει ότι δεν είναι έγκυρη. Καθορίζετε τον χρόνο που η απάντηση παραμένει έγκυρη στην οδηγία για τη μέγιστη ηλικία.
Το SWR θεωρεί μη έγκυρη οποιαδήποτε απόκριση στην προσωρινή μνήμη παλαιότερη από τη μέγιστη ηλικία. Αφού η εφαρμογή σας αποδώσει τα μπαγιάτικα αποθηκευμένα δεδομένα, το SWR θα τα επικυρώσει ξανά και θα επιστρέψει νέα δεδομένα που μπορείτε να χρησιμοποιήσετε για να ενημερώσετε τη σελίδα.
Πώς να λάβετε δεδομένα στο Next.js με SWR
Ξεκινήστε να χρησιμοποιείτε το SWR στο React εγκαθιστώντας το πρώτα μέσω ενός διαχειριστή πακέτων. Αυτή η εντολή χρησιμοποιεί npm.
npm εγκαθιστώ swr\n
Σε ένα αρχείο συστατικού, εισαγάγετε το άγκιστρο useSWR από το swr.
εισαγωγή χρήση SWR από"swr"\n
Το άγκιστρο useSWR δέχεται δύο ορίσματα:
- Ένα μοναδικό αναγνωριστικό για τα δεδομένα. Συνήθως η διεύθυνση URL του API.
- Μια λειτουργία ανάκτησης. Αυτή είναι η λειτουργία που χρησιμοποιείται για την ανάκτηση δεδομένων. Μπορεί να χρησιμοποιήσει fetch, Axios ή άλλα εργαλεία ανάκτησης δεδομένων.
Το άγκιστρο επιστρέφει τα δεδομένα και ένα αντικείμενο σφάλματος. Βεβαιωθείτε ότι χρησιμοποιήστε αυτό το άγκιστρο σύμφωνα με τις βέλτιστες πρακτικές.
Ακολουθεί ένα παράδειγμα που δείχνει πώς να χρησιμοποιήσετε το άγκιστρο useSWR.
συνθ φέρω = (...args) => fetch(...args).τότε(res => res.json());\nconst {data, error} = useSWR("/api/data", ανάκτηση);\n
Μπορείτε να αποδώσετε τα δεδομένα σε ένα στοιχείο όπως αυτό:
εισαγωγή χρήση SWR από"swr"\nσυνάρτηση Αρχική σελίδα () {\n συνθ φέρω = (...args) => fetch(...args).τότε(res => res.json());\n συνθ {data, error} = useSWR("/api/data", ανάκτηση);\n αν (λάθος) ΕΠΙΣΤΡΟΦΗ<div>απέτυχε να φορτώσειdiv>\n αν (!δεδομένα) ΕΠΙΣΤΡΟΦΗ<div>φόρτωση...div>\n ΕΠΙΣΤΡΟΦΗ<div>{δεδομένα}div>\n}\n
Αυτή είναι μια απλή υλοποίηση του SWR. ο Έγγραφα SWR εμβαθύνετε, γι' αυτό ελέγξτε τα για να μάθετε περισσότερα.
Γιατί να χρησιμοποιήσετε SWR;
Το SWR έχει πολλά πλεονεκτήματα σε σχέση με άλλες μεθόδους ανάκτησης δεδομένων.
Προσωρινή αποθήκευση
Με τις παραδοσιακές μεθόδους ανάκτησης δεδομένων, πρέπει να χρησιμοποιήσετε ένα spinner ή ένα μήνυμα φόρτωσης για να βελτιώσετε την εμπειρία χρήστη όταν η εφαρμογή λαμβάνει δεδομένα.
Το SWR σάς επιτρέπει να εμφανίζετε παλιά δεδομένα στον χρήστη, ενώ τα επικυρώνετε ξανά. Αυτό σημαίνει ότι ο χρήστης δεν χρειάζεται να περιμένει να επιστρέψει δεδομένα από τη συσκευή ανάκτησης.
Επανακύρωση
Μέσω της επανεπικύρωσης, το SWR κάνει τα αποθηκευμένα δεδομένα στην κρυφή μνήμη και πάλι φρέσκα και η σελίδα αποδίδεται εκ νέου με ενημερωμένα δεδομένα. Η επανεπικύρωση είναι ιδιαίτερα σημαντική για ιστότοπους των οποίων το περιεχόμενο αλλάζει τακτικά.
Σελιδοποίηση
ο χρησιμοποιήστε SWRI άπειρο άγκιστρο από το SWR σας επιτρέπει να εφαρμόσετε εύκολα τη σελιδοποίηση ή ακόμα και να δημιουργήσετε ένα άπειρο περιβάλλον εργασίας φόρτωσης.
Το SWR επιτρέπει σε έναν χρήστη να επιστρέψει στη θέση κύλισης μιας σελίδας όταν επιστρέψει σε αυτήν. Αυτό συμβάλλει σε μια καλύτερη εμπειρία χρήστη.
Ανάκτηση εξαρτημένων δεδομένων
Μπορείτε να ανακτήσετε δεδομένα που εξαρτώνται από άλλα δεδομένα. Σας επιτρέπει να χρησιμοποιείτε τα δεδομένα που επιστρέφονται από ένα αίτημα σε ένα άλλο αίτημα.
Χρησιμοποιήστε το SWR για να βελτιώσετε τη χρηστικότητα
Το SWR είναι ένα εργαλείο ανάκτησης δεδομένων με δυνατότητα αυτόματης επανεπικύρωσης που βοηθά τις εφαρμογές να αποδίδουν προσωρινά αποθηκευμένο περιεχόμενο ενώ περιμένουν ενημερωμένο περιεχόμενο. Οι χρήστες μπορούν να αλληλεπιδράσουν με το περιεχόμενο αμέσως αντί να περιμένουν στον διακομιστή να επιστρέψει δεδομένα.
Το SWR σάς βοηθά επίσης να δημιουργήσετε σελιδοποίηση, άπειρη φόρτωση, ανάκτηση θέσης κύλισης και άλλες πολύπλοκες λειτουργίες. Εάν λαμβάνετε δεδομένα που χρειάζονται τακτικές ενημερώσεις, θα πρέπει οπωσδήποτε να εξετάσετε το ενδεχόμενο να τα χρησιμοποιήσετε.