Πώς να προσθέσετε οθόνες Skeleton στο Next.js

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

Μάθετε τι ακριβώς είναι μια οθόνη σκελετού, γιατί μπορεί να θέλετε να τα χρησιμοποιήσετε στην εφαρμογή σας και πώς να τα εφαρμόσετε στο Next.js.

Τι είναι η οθόνη Skeleton;

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

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

Γιατί να χρησιμοποιήσετε μια οθόνη Skeleton;

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

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

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

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

Πώς να εφαρμόσετε μια οθόνη Skeleton στο Next.js

Υπάρχουν μερικοί τρόποι για την υλοποίηση οθονών σκελετού στο Next.js. Μπορείτε να χρησιμοποιήσετε ενσωματωμένες λειτουργίες για να αναδημιουργήσετε με μη αυτόματο τρόπο μια απλή οθόνη σκελετού. Ή μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη όπως αντιδρώ-φόρτωση-σκελετός ή Material UI για να κάνει τη δουλειά για εσάς.

Μέθοδος 1: Χρήση των ενσωματωμένων δυνατοτήτων

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

εισαγωγή {useState, useEffect} από 'αντιδρώ';
λειτουργίαMyComponent() {
συνθ [isLoading, setIsLoading] = useState(αληθής);
useEffect(() => {
 setTimeout(() => setIsLoading(ψευδής), 1000);
 }, []);
ΕΠΙΣΤΡΟΦΗ (
<div>
 {isLoading && (
<div>
 Φόρτωση...
</div>
 )}
 {!isLoading && (
<div>
 Το περιεχόμενο των στοιχείων μου.
</div>
 )}
</div>
 );
}
εξαγωγήΠροκαθορισμένο MyComponent;

Ο παραπάνω κώδικας χρησιμοποιεί το χρήση Κατάσταση άγκιστρο για να παρακολουθείτε εάν φορτώνονται δεδομένα (είναι Φόρτωση). Χρησιμοποιεί το useEffect γάντζο για την προσομοίωση της ασύγχρονης φόρτωσης δεδομένων. Τέλος, χρησιμοποιεί το && χειριστή για να αποδώσει υπό όρους την οθόνη του σκελετού ή το περιεχόμενο του στοιχείου.

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

Μέθοδος 2: Χρήση βιβλιοθήκης όπως το «React-Loading-Skeleton»

Ένας άλλος τρόπος για να εφαρμόσετε οθόνες σκελετού είναι να χρησιμοποιήσετε μια βιβλιοθήκη όπως αντιδρώ-φόρτωση-σκελετός. Το react-loading-skeleton είναι ένα στοιχείο React που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε οθόνες σκελετών. Εχει ένα στοιχείο που μπορείτε να τυλίξετε γύρω από οποιοδήποτε στοιχείο διεπαφής χρήστη.

Για να χρησιμοποιήσετε το react-loading-skeleton, πρέπει να το εγκαταστήσετε χρησιμοποιώντας npm.

npm i react-loading-skeleton

Μόλις εγκατασταθεί, μπορείτε να το εισαγάγετε στην εφαρμογή Next.js και να το χρησιμοποιήσετε ως εξής:

εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή Σκελετός από «αντίδραση-φόρτωση-σκελετός»·
εισαγωγή 'react-loading-skeleton/dist/skeleton.css'
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Σκελετός />
<h3>Δεύτερη οθόνη</h3>
<Ύψος σκελετού={40} />
</div>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ο παραπάνω κωδικός εισάγει το Σκελετός στοιχείο από τη βιβλιοθήκη react-loading-skeleton. Στη συνέχεια το χρησιμοποιεί για να δημιουργήσει δύο οθόνες σκελετού. Χρησιμοποιεί το ύψος στήριγμα για να ορίσετε το ύψος της οθόνης του σκελετού. Τώρα μπορείς χρήση απόδοσης υπό όρους για απόδοση του στοιχείου μόνο όταν υπάρχουν τα δεδομένα.

Μέθοδος 3: Χρήση διεπαφής χρήστη υλικού

Εάν χρησιμοποιείτε το Material UI στην εφαρμογή Next.js, μπορείτε να χρησιμοποιήσετε το συστατικό από το @mui/υλικό βιβλιοθήκη. ο Το στοιχείο από το Material UI έχει μερικά στηρίγματα που μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε την οθόνη του σκελετού.

Για να χρησιμοποιήσετε το στοιχείο από το Material UI, πρέπει πρώτα να το εγκαταστήσετε χρησιμοποιώντας npm:

npm εγκατάσταση @mui/material

Μόλις εγκατασταθεί, μπορείτε να το εισαγάγετε στην εφαρμογή Next.js και να το χρησιμοποιήσετε ως εξής:

εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή Σκελετός από '@mui/material/Skeleton';
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Παραλλαγή σκελετού="ορθός" πλάτος={210} ύψος={118} />
<h3>Δεύτερη οθόνη</h3>
<Παραλλαγή σκελετού="κείμενο" />
</div>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ο παραπάνω κωδικός εισάγει το Σκελετός συστατικό από το @material-ui/lab βιβλιοθήκη. Στη συνέχεια δημιουργεί δύο οθόνες σκελετού. ο παραλαγή Το prop ορίζει τον τύπο της οθόνης σκελετού. ο πλάτος και ύψος τα στηρίγματα ορίζουν τις διαστάσεις της οθόνης του σκελετού.

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

εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή Σκελετός από '@mui/material/Skeleton';
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Παραλλαγή σκελετού="ορθός" πλάτος={210} ύψος={118} />
<h3>Δεύτερη οθόνη</h3>
<Παραλλαγή σκελετού="κείμενο" εμψυχώ="κύμα" />
</div>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

Βελτιώστε την εμπειρία χρήστη με τις οθόνες Skeleton

Οι οθόνες Skeleton μπορούν να είναι ένας εξαιρετικός τρόπος για να βελτιώσετε την εμπειρία χρήστη της εφαρμογής Next.js. Μπορούν να αυξήσουν την αντιληπτή ταχύτητα, να μειώσουν το jank και να προσφέρουν καλύτερη εμπειρία όταν τα δεδομένα ταξιδεύουν σε μια αργή ή ασταθή σύνδεση.

Όποια μέθοδο κι αν επιλέξετε για να προσθέσετε οθόνες σκελετού, είναι ένας πολύ καλός τρόπος για να βελτιώσετε την εμπειρία χρήστη της εφαρμογής Next.js.