Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Το Next.js είναι ένα ισχυρό πλαίσιο που επιτρέπει στους προγραμματιστές να δημιουργούν γρήγορα εφαρμογές React που έχουν αποδοθεί από την πλευρά του διακομιστή. Έχει διάφορα βασικά χαρακτηριστικά. Ένα από τα βασικά χαρακτηριστικά του είναι η ικανότητά του να ανακτά εύκολα δεδομένα και να τα κάνει άμεσα διαθέσιμα στα εξαρτήματα.

Η ανάκτηση δεδομένων είναι ένα βασικό χαρακτηριστικό που επιτρέπει στους προγραμματιστές να ανακτούν και να εμφανίζουν δεδομένα σε έναν ιστότοπο/εφαρμογή ιστού. Υπάρχουν μερικοί διαφορετικοί τρόποι ανάκτησης δεδομένων στο Next.js, ο καθένας με τα πλεονεκτήματά του και τις περιπτώσεις χρήσης του. Αυτό το άρθρο θα διερευνήσει διαφορετικούς τρόπους ανάκτησης δεδομένων στο Next.js.

Χρήση του useEffect Hook για ανάκτηση δεδομένων

ο useEffect γάντζος είναι α React hook που χρησιμοποιείται για παρενέργειες,

instagram viewer
όπως κλήσεις API σε στοιχεία. Μπορείτε να χρησιμοποιήσετε το άγκιστρο useEffect για να ανακτήσετε δεδομένα στο Next.js.

Αυτό το άγκιστρο είναι χρήσιμο για σελίδες που χρειάζονται δυναμικά δεδομένα, όπως σελίδες προφίλ χρήστη που εμφανίζουν πληροφορίες ειδικά για τον χρήστη που είναι συνδεδεμένος.

Για να χρησιμοποιήσετε το άγκιστρο useEffect, το εισάγετε πρώτα στο στοιχείο της επιλογής σας, ανακτάτε τα δεδομένα και αποδίδετε τη σελίδα σας χρησιμοποιώντας το.

Για παράδειγμα:

εισαγωγή { useEffect, useState } από'αντιδρώ';
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ [data, setData] = useState("");


 useEffect(() => {
 φέρω(' https://api.example.com/data');
 .έπειτα( (απάντηση) => answer.json() )
 .έπειτα( (δεδομένα) => setData (δεδομένα) )
 }, []); 
ΕΠΙΣΤΡΟΦΗ (


 {data.name}
 </div>
 )
}

Αυτό το μπλοκ κώδικα χρησιμοποιεί το άγκιστρο useEffect για την ανάκτηση δεδομένων από ένα API. Εάν μεταβιβάζει δύο παραμέτρους στο άγκιστρο useEffect: μια συνάρτηση για την ανάκτηση των δεδομένων και έναν πίνακα εξάρτησης. Στην επιτυχία, χρησιμοποιεί setData() για να ενημερώσετε την κατάσταση του στοιχείου με τα δεδομένα που επιστρέφει το αίτημα ανάκτησης.

Ο πίνακας εξαρτήσεων που μεταβιβάζετε στο άγκιστρο useEffect θα πρέπει να περιέχει την τιμή από την οποία εξαρτάται το εφέ. Το στοιχείο θα εκτελέσει ξανά το εφέ μόνο όταν αλλάξει η τιμή στον πίνακα εξάρτησης. Εάν ο πίνακας εξαρτήσεων είναι κενός - όπως σε αυτό το παράδειγμα - το εφέ θα εκτελεστεί μόνο στην πρώτη απόδοση.

Χειρισμός αυτόματης επανεπικύρωσης με χρήση SWR

ο SWR Η βιβλιοθήκη (stale-while-revalidate) είναι μια βιβλιοθήκη αγκίστρου React για το χειρισμό της ανάκτησης δεδομένων. Εσυ πρεπει ρυθμίστε τη βιβλιοθήκη SWR πρώτα, για να το χρησιμοποιήσετε στην επόμενη εφαρμογή σας.

Ένα από τα βασικά χαρακτηριστικά της βιβλιοθήκης SWR είναι η ικανότητά της να αυτοματοποιεί την επανεπικύρωση δεδομένων. Αυτή η δυνατότητα είναι απαραίτητη όταν τα δεδομένα ενημερώνονται συχνά και πρέπει να είναι συνεχώς ενημερωμένα. Αυτή η λειτουργία διασφαλίζει ότι η εφαρμογή σας έχει πάντα πρόσβαση στα πιο πρόσφατα δεδομένα, καθιστώντας την πιο δυναμική και ανταποκρινόμενη στους χρήστες σας.

Η βιβλιοθήκη SWR υποβάλλει ένα νέο αίτημα ανάκτησης σε ένα API όταν ένας χρήστης εστιάζει ξανά σε μια σελίδα ή κάνει εναλλαγή μεταξύ καρτελών. Όταν ένας χρήστης φεύγει από μια σελίδα, τα δεδομένα που εμφανίζονται στην οθόνη γίνονται μπαγιάτικα. Όταν επιστρέφουν στη σελίδα, η βιβλιοθήκη SWR στέλνει ένα νέο αίτημα ανάκτησης στο API και συγκρίνει τα νέα δεδομένα με τα παλιά δεδομένα για να προσδιορίσει εάν έχουν αλλάξει.

Για να σταματήσετε τη βιβλιοθήκη SWR από την εκτέλεση αυτής της ενέργειας, μπορείτε να χρησιμοποιήσετε το revalidateOnFocus επιλογή.

Όπως έτσι:

συνθ { data, error, isLoading } = useSWR(' https://api.example.com/data', ανάκτηση, {
 revalidateOnFocus: ψευδής,
})

Η ρύθμιση της ιδιότητας revalidateOnFocus σε false θα διασφαλίσει ότι η βιβλιοθήκη SWR δεν επικυρώνει εκ νέου τα δεδομένα σας κάθε φορά που εστιάσετε ξανά στη σελίδα.

Η βιβλιοθήκη SWR επικυρώνει εκ νέου τα δεδομένα κάθε φορά που ένας χρήστης συνδέεται ξανά στο διαδίκτυο. Αυτή η ενέργεια μπορεί να είναι πολύ χρήσιμη σε ορισμένες περιπτώσεις και λειτουργεί αυτόματα.

Για να απενεργοποιήσετε τη δράση, μπορείτε να χρησιμοποιήσετε το revalidateOnReconnect επιλογή:

συνθ { data, error, isLoading } = useSWR(' https://api.example.com/data', ανάκτηση, {
 revalidateOnReconnect: ψευδής,
})

Για να απενεργοποιήσετε την αυτόματη επανεπικύρωση των δεδομένων σας, ορίστε τις ιδιότητες revalidateOnFocus και revalidateOnRecconect σε false.

Χρήση της βιβλιοθήκης Isomorphic-Unfetch για την εκτέλεση αιτημάτων ανάκτησης

ο ισόμορφο-αποφέρω Η βιβλιοθήκη είναι μια μικρή, ελαφριά βιβλιοθήκη που μπορεί να εκτελέσει αιτήματα ανάκτησης σε μια εφαρμογή Next.js. Η βιβλιοθήκη είναι μια εξαιρετική εναλλακτική λύση για τη μητρική φέρω API. Είναι απλό στη χρήση, γεγονός που το καθιστά ιδανικό για προγραμματιστές που είναι νέοι στην υποβολή αιτημάτων ανάκτησης.

Μπορείτε να χρησιμοποιήσετε το isomorphic-unfetch ως πολυγέμισμα για παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν το εγγενές API ανάκτησης. Η βιβλιοθήκη isomorphic-unfetch είναι μινιμαλιστική και κατάλληλη για εργασία σε μικρές εφαρμογές.

Για να χρησιμοποιήσετε το isomorphic-unfetch σε μια εφαρμογή Next.js, εγκαταστήστε τη βιβλιοθήκη εκτελώντας την ακόλουθη εντολή:

npm εγκατάσταση isomorphic-unfetch

Στη συνέχεια, μπορείτε να εισαγάγετε τη βιβλιοθήκη και να τη χρησιμοποιήσετε στο στοιχείο σας για την ανάκτηση δεδομένων, όπως αυτό:

εισαγωγή Φέρω από"ισόμορφο-αποφέρω"
εισαγωγή {useState, useEffect} από'αντιδρώ'
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ [data, setData] = useState(μηδενικό)


 useEffect(() => {
 Φέρω(' https://api.example.com/data')
 .έπειτα( (απάντηση) => απάντηση.json)
 .έπειτα( (δεδομένα) => setData (δεδομένα) )
 }, [])

αν (!δεδομένα) ΕΠΙΣΤΡΟΦΗ<div>Φόρτωση...div>
ΕΠΙΣΤΡΟΦΗ (


{data.name}</h1>
 </div>
 )
}

Η συνάρτηση isomorphic-unfetch λειτουργεί τόσο από την πλευρά του πελάτη όσο και από την πλευρά του διακομιστή.

Αποτελεσματική ανάκτηση δεδομένων με το Next.js

Η ανάκτηση δεδομένων είναι ένα σημαντικό χαρακτηριστικό κατά την ανάπτυξη εφαρμογών. Το Next.js παρέχει διάφορους τρόπους ανάκτησης δεδομένων, καθένας από τους οποίους έχει τα πλεονεκτήματά του και τις ανταλλαγές του.

Όταν αποφασίζετε για τη μέθοδο χρήσης, λάβετε υπόψη τις συμβιβασμούς και βεβαιωθείτε ότι χρησιμοποιείτε μια τεχνική με την οποία αισθάνεστε άνετα.