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

Η απόδοση είναι η διαδικασία μετατροπής του κώδικα React σε HTML. Η μέθοδος απόδοσης που επιλέγετε εξαρτάται από τα δεδομένα με τα οποία εργάζεστε και από το πόσο ενδιαφέρεστε για την απόδοση.

Στο Next.js, η απόδοση είναι πολύ ευέλικτη. Μπορείτε να αποδώσετε σελίδες από την πλευρά του πελάτη ή του διακομιστή, στατικά ή σταδιακά.

Ρίξτε μια ματιά στο πώς λειτουργούν αυτές οι μέθοδοι και πώς λειτουργεί η καθεμία.

Απόδοση από την πλευρά του διακομιστή

Με την απόδοση από την πλευρά του διακομιστή (SSR), όταν ένας χρήστης επισκέπτεται μια ιστοσελίδα, το πρόγραμμα περιήγησης στέλνει ένα αίτημα στον διακομιστή για αυτήν τη σελίδα. Ο διακομιστής ανακτά τα απαραίτητα δεδομένα από τη βάση δεδομένων, εάν χρειάζεται, και τα στέλνει μαζί με το περιεχόμενο της σελίδας στο πρόγραμμα περιήγησης. Στη συνέχεια, το πρόγραμμα περιήγησης το εμφανίζει στον χρήστη.

instagram viewer

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

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

Χρησιμοποιήστε το getServerSideProps για να δημιουργήσετε ξανά τη σελίδα κάθε φορά που ένας χρήστης το ζητά.

εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι({ δεδομένα }) {
ΕΠΙΣΤΡΟΦΗ (
<κύριος>
 // Χρήσηδεδομένα
</main>
 );
}
εξαγωγήασυγχρονισμόςλειτουργίαgetServerSideProps() {
// Ανάκτηση δεδομένων από εξωτερικό api
συνθ res = αναμένω fetch('https://.../data')
συνθ δεδομένα = αναμένω res.json()
// Θα μεταβιβαστεί στο στοιχείο σελίδας ως στηρίγματα
ΕΠΙΣΤΡΟΦΗ { στηρίγματα: { δεδομένα } }
}

Το getServerSideProps εκτελείται μόνο στον διακομιστή και εκτελείται ως εξής:

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

Στη νέα έκδοση, μπορείτε να επιλέξετε την απόδοση από την πλευρά του διακομιστή χρησιμοποιώντας δυναμικές ανακτήσεις δεδομένων σε μια σελίδα ή μια διάταξη.

Οι δυναμικές ανακτήσεις δεδομένων είναι αιτήματα fetch() που εξαιρούνται συγκεκριμένα από την προσωρινή αποθήκευση ορίζοντας την επιλογή cache σε "no-store".

φέρω('https://...', { cache: 'χωρίς κατάστημα' });

Εναλλακτικά, ορίστε το revalidate σε 0:

φέρω('https://...', { next: { revalidate: 0 } });

Αυτή η δυνατότητα είναι αυτήν τη στιγμή σε έκδοση beta, γι' αυτό να το έχετε υπόψη σας. Μπορείτε να διαβάσετε περισσότερα σχετικά με τις δυναμικές ανακτήσεις δεδομένων στο Έγγραφα Next.js 13 beta.

Απόδοση από την πλευρά του πελάτη

Θα πρέπει να χρησιμοποιείτε την απόδοση από την πλευρά του πελάτη (CSR) όταν χρειάζεται να ενημερώνετε τα δεδομένα συχνά ή όταν δεν θέλετε να προ-απόδοση της σελίδας σας. Μπορείτε να εφαρμόσετε την ΕΚΕ σε επίπεδο σελίδας ή σε επίπεδο στοιχείου. Σε επίπεδο σελίδας, το Next.js ανακτά δεδομένα κατά την εκτέλεση και όταν ολοκληρωθεί σε επίπεδο στοιχείου, ανακτά δεδομένα κατά την προσάρτηση. Εξαιτίας αυτού, η ΕΚΕ μπορεί να συμβάλει στην αργή απόδοση.

Χρησιμοποιήστε το Άγκιστρο useEffect(). για απόδοση σελίδων στον πελάτη ως εξής:

εισαγωγή { useState, useEffect } από 'αντιδρώ'
λειτουργίαΣπίτι() {
συνθ [data, setData] = useState(μηδενικό)
συνθ [isLoading, setLoading] = useState(ψευδής)
useEffect(() => {
 setLoading(αληθής)


φέρω('/api/get-data')
 .then((res) => res.json())
 .then((data) => {
 setData (δεδομένα)
 setLoading(ψευδής)
 })
 }, [])


εάν (είναι Φόρτωση) επιστρέψει <Π>Φόρτωση...</Π>
 εάν (!δεδομένα) επιστρέψουν <Π>Χωρίς δεδομένα</Π>
ΕΠΙΣΤΡΟΦΗ (
<div>
 // Χρήσηδεδομένα
</div>
 )
}

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

εισαγωγή χρήση SWR από 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
λειτουργίαΣπίτι() {
συνθ { data, error } = useSWR('/api/δεδομένα», ανάκτηση)
 αν (σφάλμα) επιστρέψει <div>Απέτυχε να φορτώσει</div>
 εάν (!δεδομένα) επιστρέψουν <div>Φόρτωση...</div>
ΕΠΙΣΤΡΟΦΗ (
<div>
 // Χρήσηδεδομένα
</div>
 )
}

Στο Next.js 13, πρέπει να χρησιμοποιήσετε ένα στοιχείο πελάτη προσθέτοντας την οδηγία "use client" στο επάνω μέρος του αρχείου.

"χρήσηπελάτης";
εξαγωγήΠροκαθορισμένο () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
// Στοιχείο πελάτη
</div>
 );
};

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

Δημιουργία στατικής τοποθεσίας

Με παραγωγή στατικής τοποθεσίας (SSG), η σελίδα ανακτά δεδομένα μία φορά κατά τη διάρκεια της κατασκευής. Οι σελίδες που δημιουργούνται στατικά είναι πολύ γρήγορες και έχουν καλή απόδοση, επειδή όλες οι σελίδες έχουν κατασκευαστεί εκ των προτέρων. Το SSG είναι επομένως ιδανικό για σελίδες που χρησιμοποιούν στατικό περιεχόμενο, όπως σελίδες πωλήσεων ή ιστολόγια.

Στο Next.js, πρέπει να εξαγάγετε τη συνάρτηση getStaticProps στη σελίδα που θέλετε να αποδώσετε στατικά.

εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι({ δεδομένα }) {
ΕΠΙΣΤΡΟΦΗ (
<κύριος>
 // Χρήσηδεδομένα
</main>
 );
}
εξαγωγήασυγχρονισμόςλειτουργίαgetStaticProps() {
// Λήψη δεδομένων από εξωτερικό API κατά το χρόνο δημιουργίας
συνθ res = αναμένω fetch('https://.../data') 
συνθ δεδομένα = αναμένω res.json()
// Θα μεταβιβαστεί στο στοιχείο σελίδας ως στηρίγματα
ΕΠΙΣΤΡΟΦΗ { στηρίγματα: { δεδομένα } }
}

Μπορείτε επίσης να ρωτήσετε τη βάση δεδομένων μέσα στο getStaticProps.

εξαγωγήασυγχρονισμόςλειτουργίαgetStaticProps() {
 // Κλήσηλειτουργίαπρος τηνφέρωδεδομένααπόβάση δεδομένων
συνθ δεδομένα = αναμένω getDataFromDB()
ΕΠΙΣΤΡΟΦΗ { στηρίγματα: { δεδομένα } }
}

Στο Next.js 13, η στατική απόδοση είναι η προεπιλογή και το περιεχόμενο γίνεται ανάκτηση και αποθήκευση στην προσωρινή μνήμη, εκτός εάν απενεργοποιήσετε την επιλογή προσωρινής αποθήκευσης.

ασυγχρονισμόςλειτουργίαgetData() {
συνθ res = αναμένω fetch('https://.../data');
ΕΠΙΣΤΡΟΦΗ res.json();
}
εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαΣπίτι() {
συνθ δεδομένα = αναμένω getData();
ΕΠΙΣΤΡΟΦΗ (
<κύριος>
 // Χρήσηδεδομένα
</main>
 );
}

Μάθε περισσότερα για στατική απόδοση στο Next.js 13 από τα έγγραφα.

Αυξητική-Στατική Δημιουργία

Υπάρχουν φορές που θέλετε να χρησιμοποιήσετε το SSG αλλά θέλετε επίσης να ενημερώνετε το περιεχόμενο τακτικά. Εδώ βοηθάει η αυξητική στατική παραγωγή (ISG).

Το ISG σάς επιτρέπει να δημιουργείτε ή να ενημερώνετε στατικές σελίδες αφού τις δημιουργήσετε μετά το χρονικό διάστημα που καθορίζετε. Με αυτόν τον τρόπο, δεν χρειάζεται να δημιουργήσετε ξανά ολόκληρο τον ιστότοπο μόνο τις σελίδες που το χρειάζονται.

Το ISG διατηρεί τα πλεονεκτήματα του SSG με το πρόσθετο πλεονέκτημα της παροχής ενημερωμένου περιεχομένου στους χρήστες. Το ISG είναι ιδανικό για τις σελίδες στον ιστότοπό σας που καταναλώνουν μεταβαλλόμενα δεδομένα. Για παράδειγμα, μπορείτε χρησιμοποιήστε το ISR για την απόδοση αναρτήσεων ιστολογίου έτσι ώστε το ιστολόγιο να παραμένει ενημερωμένο όταν επεξεργάζεστε αναρτήσεις ή προσθέτετε νέες.

Για να χρησιμοποιήσετε το ISR, προσθέστε το στηρίγματα επανεπικύρωσης στη συνάρτηση getStaticProps σε μια σελίδα.

εξαγωγήασυγχρονισμόςλειτουργίαgetStaticProps() {
συνθ res = αναμένω fetch('https://.../data')
συνθ δεδομένα = αναμένω res.json()
ΕΠΙΣΤΡΟΦΗ {
 στηρίγματα: {
 δεδομένα,
 },
 επανεπικύρωση: 60
 }
}

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

Στο Next.js 13, χρησιμοποιήστε το revalidate στο fetch ως εξής:

φέρω('https://.../data', { next: { revalidate: 60 } });

Μπορείτε να ορίσετε το χρονικό διάστημα σε ό, τι λειτουργεί καλύτερα με τα δεδομένα σας.

Πώς να επιλέξετε μια μέθοδο απόδοσης

Μέχρι στιγμής έχετε μάθει για τις τέσσερις μεθόδους απόδοσης στο Next.js — CSR, SSR, SSG και ISG. Κάθε μία από αυτές τις μεθόδους είναι κατάλληλη για διαφορετικές καταστάσεις. Η ΕΚΕ είναι χρήσιμη για σελίδες που χρειάζονται φρέσκα δεδομένα, όπου το ισχυρό SEO δεν προκαλεί ανησυχία. Το SSR είναι επίσης εξαιρετικό για σελίδες που καταναλώνουν δυναμικά δεδομένα, αλλά είναι πιο φιλικό προς το SEO.

Το SSG είναι κατάλληλο για σελίδες των οποίων τα δεδομένα είναι ως επί το πλείστον στατικά, ενώ το ISG είναι το καλύτερο για σελίδες που περιέχουν δεδομένα που θέλετε να ενημερώνετε κατά διαστήματα. Τα SSG και ISG είναι υπέροχα όσον αφορά την απόδοση και το SEO, καθώς τα δεδομένα έχουν ληφθεί εκ των προτέρων και μπορείτε να τα αποθηκεύσετε στην προσωρινή μνήμη.