Η συνάρτηση Edge μπορεί να είναι μια μικρή, καλά καθορισμένη έννοια, αλλά μπορείτε να τη χρησιμοποιήσετε για ένα ευρύ φάσμα σκοπών.
Το Next.js είναι ένα δημοφιλές πλαίσιο ανοιχτού κώδικα για την ανάπτυξη εφαρμογών React που έχουν αποδοθεί από την πλευρά του διακομιστή. Χάρη στην ευκολία χρήσης και την προσαρμοστικότητά του, μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε πολύπλοκες εφαρμογές web.
Οι λειτουργίες Edge είναι ένα από τα πιο συναρπαστικά χαρακτηριστικά του Next.js. Μάθετε για τις συναρτήσεις Edge και πέντε τρόπους χρήσης τους στο Next.js.
Τι είναι οι Λειτουργίες Edge;
Η ισχυρή δυνατότητα συναρτήσεων Edge του Next.js σάς επιτρέπει να εκτελείτε προσαρμοσμένες λειτουργίες χωρίς διακομιστή πιο κοντά στον τελικό χρήστη στο δίκτυο edge. Αυτό σημαίνει ότι ο κώδικας εκτελείται σε διακομιστές που βρίσκονται γεωγραφικά πιο κοντά στον πελάτη, επιφέροντας ταχύτερη και μεγαλύτερη απόδοση σε εφαρμογές web.
Οι συναρτήσεις Edge μπορούν να αλλάξουν το αίτημα ή την απόκριση, να ανακτήσουν δεδομένα, να ελέγξουν την ταυτότητα και πολλά άλλα.
Οι λειτουργίες άκρων εκτελούνται άμεσα. Δεδομένου ότι μειώνουν τον χρόνο που απαιτείται για τη φόρτωση δεδομένων και την απόδοση σελίδων, μπορείτε να χρησιμοποιήσετε τις λειτουργίες Edge για να βελτιώσετε την απόδοση ιστού και την εμπειρία χρήστη.
Τα σύγχρονα και νέας γενιάς gadgets χρειάζονται υπολογισμός ακμών γιατί είναι πιο αξιόπιστο και ασφαλές από cloud computing και αξιοποιεί τις λειτουργίες Edge. Επιπλέον, είναι πιο ικανό και ευέλικτο από τον υπολογισμό μόνο στη συσκευή.
Ακολουθούν ορισμένοι τρόποι με τους οποίους μπορείτε να χρησιμοποιήσετε τις συναρτήσεις Edge στο Next.js.
1. Δυναμική δρομολόγηση
Ένας τρόπος με τον οποίο μπορείτε να χρησιμοποιήσετε τις συναρτήσεις Edge στο Next.js είναι μέσω της δυναμικής δρομολόγησης. Μπορείτε να ορίσετε και να διαχειριστείτε προσαρμοσμένες διαδρομές με βάση δυναμικά δεδομένα, όπως παραμέτρους ερωτήματος ή κεφαλίδες αιτημάτων.
Αυτό είναι πολύτιμο για τη δημιουργία πιο προσαρμόσιμων και δυναμικών εφαρμογών web που αντιμετωπίζουν διάφορα αιτήματα.
Μπορείτε να χρησιμοποιήσετε τις συναρτήσεις Edge του Next.js για να εφαρμόσετε δυναμική δρομολόγηση με τον ακόλουθο τρόπο:
// pages/api/[slug].js
εξαγωγήΠροκαθορισμένολειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ { slug } = req.query;
αν (γυμνοσάλιαγκας 'σχετικά με') {
res.status(200).στείλετε('Αυτή είναι η σελίδα για!');
} αλλούαν (γυμνοσάλιαγκας 'Επικοινωνία') {
res.status(200).στείλετε("Αυτή είναι η σελίδα επικοινωνίας!");
} αλλού {
res.status(404).στείλετε('Η σελίδα δεν βρέθηκε.');
}
}
Αυτό το παράδειγμα δείχνει τα περιεχόμενα ενός αρχείου με όνομα [slug.js] στο σελίδες/api κατάλογο για να ορίσετε μια προσαρμοσμένη διαδρομή με δυναμικά δεδομένα. Στη συνέχεια, το όριο του γυμνοσάλιαγκου αφαιρείται από το ερώτημα αιτήματος χρησιμοποιώντας απαίτηση.ερώτημα, που σας επιτρέπει να αντιμετωπίσετε απαιτήσεις που βασίζονται δυναμικά στην αξία του γυμνοσάλιαγκας.
Για παράδειγμα, εάν ένας χρήστης πηγαίνει στο http://example.com/api/about, η παράμετρος slug θα οριστεί σε σχετικά με. ο χειριστής Η λειτουργία θα εκτελέσει το κατάλληλο μπλοκ κώδικα και θα εμφανίσει το μήνυμα "Αυτή είναι η σελίδα σχετικά!"
Εάν ο πελάτης επισκεφθεί http://example.com/api/contact, χειριστής θα επιστρέψει το μήνυμα "Αυτή είναι η σελίδα επικοινωνίας!"
Χρησιμοποιώντας τις λειτουργίες Edge για δυναμική δρομολόγηση, οι προγραμματιστές μπορούν να δημιουργήσουν πιο προσαρμόσιμες και δυναμικές εφαρμογές web που μπορούν να χειριστούν διάφορα αιτήματα που βασίζονται στην αλλαγή δεδομένων.
2. Ανάκτηση δεδομένων
Στο Next.js, μια συνηθισμένη περίπτωση χρήσης για τις συναρτήσεις Edge είναι η ανάκτηση δεδομένων. Μπορείτε να μειώσετε το φόρτο στον διακομιστή και να ενισχύσετε την απόδοση της εφαρμογής Ιστού φέρνοντας τα δεδομένα στην άκρη.
Οι συναρτήσεις Edge του Next.js μπορούν να πραγματοποιήσουν ανάκτηση δεδομένων, όπως φαίνεται σε αυτό το παράδειγμα:
// pages/api/users/[id].jsεξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ { id } = req.query;// Λήψη δεδομένων χρήστη από ένα API τρίτου μέρους
συνθ ανταπόκριση = αναμένω φέρω(` https://api.example.com/users/${id}`);
συνθ χρήστης = αναμένω answer.json();
// Επιστρέψτε τα δεδομένα χρήστη
res.status(200.json (χρήστης);
}
Αυτό το παράδειγμα ορίζει ένα τελικό σημείο API που χρησιμοποιεί το ταυτότητα παράμετρος ερωτήματος για την ανάκτηση δεδομένων χρήστη από ένα API τρίτου μέρους. Χρησιμοποιώντας την φέρω μέθοδο, μπορείτε να στείλετε ένα αίτημα στο API και στη συνέχεια να περιμένετε μια απάντηση με τη λέξη-κλειδί αναμονής.
Στη συνέχεια, ο κώδικας εξάγει τις πληροφορίες JSON καλώντας answer.json() και το αποθηκεύει σε μια μεταβλητή. Τέλος, χρησιμοποιεί το json μέθοδος απόκρισης για τη μορφοποίηση των δεδομένων απόκρισης ως JSON.
Η ανάκτηση δεδομένων συνάρτησης Edge είναι μια ισχυρή τεχνική που σας επιτρέπει να λαμβάνετε δεδομένα στην άκρη, μειώνοντας το φόρτο του διακομιστή και βελτιώνοντας την απόδοση της εφαρμογής web.
Μπορείτε επίσης να μειώσετε την αδράνεια ζήτησης και να δώσετε στους πελάτες πιο γρήγορες, πιο ανταποκρινόμενες σελίδες, λαμβάνοντας πληροφορίες από μια διεπαφή προγραμματισμού εξωτερικού στην άκρη.
3. Χρησιμοποιείται στον έλεγχο ταυτότητας
Εφαρμόζοντας κανόνες ελέγχου πρόσβασης στην άκρη, μπορείτε να βελτιώσετε την ασφάλεια της εφαρμογής ιστού σας και να μειώσετε τον κίνδυνο μη εξουσιοδοτημένης πρόσβασης σε ευαίσθητα δεδομένα.
Ως παράδειγμα, θεωρήστε μια συνάρτηση που ελέγχει την κατάσταση ελέγχου ταυτότητας ενός πελάτη και την επαναλαμβάνει στην απόκριση. Ακολουθεί μια περίληψη της επαλήθευσης που περιλαμβάνει δυνατότητες Edge στο Next.js:
// pages/api/auth.js
εξαγωγήΠροκαθορισμένο (απαιτ., ανταπ.) => {
συνθ { isAuthenticated } = req.cookies;
αν (είναι πιστοποιημένο) {
res.status(200).json({ μήνυμα: 'Είσαι πιστοποιημένος' });
} αλλού {
res.status(401).json({ μήνυμα: "Δεν έχετε πιστοποιηθεί" });
}
}
Σε αυτήν την εικόνα, η συνάρτηση Edge εξετάζει το cookie για ένα διακριτικό ελέγχου ταυτότητας και, εάν βρεθεί, δημιουργεί μια απάντηση JSON με τις πληροφορίες του χρήστη.
4. Το τεστ A/B
Ένας άλλος τρόπος με τον οποίο μπορείτε να χρησιμοποιήσετε τις λειτουργίες Edge του Next.js είναι να βελτιστοποιήσετε την απόδοση μιας εφαρμογής Ιστού χρησιμοποιώντας τη δοκιμή A/B. Μπορείτε να συγκρίνετε διάφορες εκδόσεις ενός ιστότοπου ή μιας εφαρμογής χρησιμοποιώντας τη δοκιμή A/B για να προσδιορίσετε ποια έχει καλύτερη απόδοση.
Μια απεικόνιση του τρόπου με τον οποίο οι συναρτήσεις Edge του Next.js μπορούν να χρησιμοποιηθούν για τη διεξαγωγή δοκιμών A/B είναι η εξής:
// pages/api/abtest.js
συνθ παραλλαγές = ["παραλλαγή Α", "παραλλαγή Β"];εξαγωγήΠροκαθορισμένολειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ { userId } = req.query;// Δημιουργήστε μια τυχαία παραλλαγή για το χρήστη
συνθ variantIndex = Μαθηματικά.πάτωμα(Μαθηματικά.random() * variants.length);
συνθ variant = παραλλαγές[variantIndex];// Αποθηκεύστε την παραλλαγή σε ένα cookie
res.setHeader('Set-Cookie', `παραλλαγή =${παραλλαγή}; Max-Age=604800;`);
// Αποδώστε την αντίστοιχη παραλλαγή
αν (παραλαγή "παραλλαγή Α") {
res.status(200).στείλετε('Καλώς ήρθατε στην παραλλαγή Α!');
} αλλού {
res.status(200).στείλετε('Καλώς ήρθατε στην παραλλαγή Β'!);
}
}
Αυτός ο κώδικας δείχνει ένα τελικό σημείο διεπαφής API που εκτελεί μια δοκιμή A/B για δύο μοναδικές παραλλαγές μιας σελίδας ιστότοπου. Χρησιμοποιεί το Math.random() μέθοδο για τη δημιουργία μιας τυχαίας παραλλαγής για τον χρήστη και την αποθήκευση σε ένα cookie με το res.setHeader μέθοδος. Αυτό επιτρέπει στον κώδικα να διασφαλίσει ότι ο πελάτης βλέπει την ίδια παραλλαγή σε μελλοντικές επισκέψεις.
Ο κώδικας χρησιμοποιεί στη συνέχεια το παραλαγή την τιμή του cookie για απόδοση της κατάλληλης παραλλαγής. Εμφανίζει ένα μήνυμα που υποδεικνύει ποια παραλλαγή έχει επιλέξει.
Χρησιμοποιώντας τις λειτουργίες Edge, οι προγραμματιστές μπορούν να χρησιμοποιήσουν ένα ισχυρό εργαλείο που ονομάζεται δοκιμή A/B για να συγκρίνουν διαφορετικές εκδόσεις μιας εφαρμογής ή μιας ιστοσελίδας για να δουν ποια έχει καλύτερη απόδοση. Μπορείτε να συλλέξετε δεδομένα σχετικά με τη συμπεριφορά των χρηστών και να βελτιώσετε την απόδοση της εφαρμογής Ιστού και την εμπειρία χρήστη αναθέτοντας τυχαία χρήστες σε διάφορες παραλλαγές.
5. Προσωρινή αποθήκευση απαντήσεων
Η αποθήκευση αντιδράσεων είναι ένας άλλος τρόπος με τον οποίο μπορείτε να χρησιμοποιήσετε τις δυνατότητες του Edge στο Next.js για να βελτιστοποιήσετε την εκτέλεση ιστού. Μας επιτρέπει να διατηρούμε τις αντιδράσεις για ένα συγκεκριμένο χρονικό διάστημα για να μειώσουμε τον αριθμό των αιτημάτων που γίνονται στον διακομιστή και να εργαστούμε για την ταχύτητα της διαδικτυακής εφαρμογής.
Ακολουθεί μια απεικόνιση του τρόπου με τον οποίο μπορείτε να πραγματοποιήσετε αποθήκευση αντιδράσεων με τις δυνατότητες Edge στο Next.js:
// pages/api/data.js
συνθ δεδομένα = { όνομα: 'John Doe', ηλικία: 30 };εξαγωγήΠροκαθορισμένολειτουργίαχειριστής(απαίτηση, ανάλογ) {
// Ορίστε τις κεφαλίδες απόκρισης για να ενεργοποιήσετε την προσωρινή αποθήκευση
res.setHeader("Cache-Control", 's-maxage=10, stale-while-revalidate');
// Επιστροφή δεδομένων
res.status(200.json (δεδομένα);
}
Αυτό το παράδειγμα ορίζει ένα τελικό σημείο API που επιστρέφει μια απάντηση JSON με ορισμένα δεδομένα.
Ορίζουμε τις κεφαλίδες αντίδρασης χρησιμοποιώντας το res.setHeader τεχνική για να ενεργοποιήσετε την κράτηση για 10 δευτερόλεπτα χρησιμοποιώντας το s-max-age Όριο. Αυτό υποδεικνύει ότι το CDN μπορεί να αποθηκεύσει προσωρινά την απόκριση για έως και δέκα δευτερόλεπτα πριν απαιτήσει ανανέωση.
Χρησιμοποιούμε επίσης το μπαγιάτικο-ενώ-επικυρώνω παράμετρος για να επιτρέψει στο CDN να εμφανίσει μια αποθηκευμένη απόκριση που έχει λήξει ενώ πραγματοποιείται μια νέα απάντηση στο παρασκήνιο. Ακόμα κι αν η αποθηκευμένη απόκριση έχει λήξει, το CDN θα δημιουργήσει μια νέα και θα στέλνει πάντα μια απάντηση.
Η προσωρινή αποθήκευση απόκρισης συναρτήσεων Edge είναι ένας εξαιρετικός τρόπος για να επιταχύνετε την εφαρμογή web και να μειώσετε τον αριθμό των αιτημάτων στον διακομιστή. Μπορείτε να εγγυηθείτε στους χρήστες ταχύτερους και πιο ανταποκρινόμενους ιστότοπους αποθηκεύοντας αποκρίσεις στην προσωρινή μνήμη για προκαθορισμένο χρόνο.
Οι λειτουργίες άκρων είναι ένα απίστευτα ισχυρό χαρακτηριστικό του Next.js
Η υποστήριξη του Next.js για τις λειτουργίες Edge είναι μια συναρπαστική δυνατότητα που σας επιτρέπει να εκτελείτε προσαρμοσμένες λειτουργίες χωρίς διακομιστή πιο κοντά στον τελικό χρήστη στο δίκτυο edge.
Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να χρησιμοποιήσετε τις λειτουργίες Edge για τη βελτίωση των εφαρμογών Ιστού: δοκιμή A/B, προσωρινή αποθήκευση απόκρισης, δυναμική δρομολόγηση, ανάκτηση δεδομένων, έλεγχος ταυτότητας.
Η χρήση των δυνατοτήτων Edge στην αρχιτεκτονική σας μπορεί να βελτιώσει την εμπειρία των πελατών σας και να οδηγήσει σε πιο γρήγορες, πιο αποκριτικές εφαρμογές web.