Υπάρχει κάτι που συμβαίνει μέσα στο μπροστινό μέρος κοινότητα πρόσφατα. Η απόδοση από την πλευρά του διακομιστή γίνεται όλο και πιο ελκυστική χάρη στο React και την ενσωματωμένη δυνατότητα ενυδάτωσης από την πλευρά του διακομιστή. Ωστόσο, δεν είναι η μόνη λύση για να προσφέρει μια γρήγορη εμπειρία στον χρήστη με μια εξαιρετικά γρήγορη βαθμολογία time-to-first-byte (TTFB): Η προ-απόδοση είναι επίσης μια πολύ καλή στρατηγική. Ποια είναι η διαφορά μεταξύ αυτών των λύσεων και μιας εφαρμογής που παρέχεται από τον πελάτη;
Εφαρμογή που παρέχεται από πελάτη
Δεδομένου ότι υπάρχουν πλαίσια όπως το Angular, το Ember.js και το Backbone, οι προγραμματιστές front-end τείνουν να προσφέρουν τα πάντα από την πλευρά του πελάτη. Χάρη στην Google και την ικανότητά της να «διαβάζει» JavaScript, λειτουργεί αρκετά καλά και είναι ακόμη και φιλικό προς το SEO.
Με μια λύση απόδοσης από την πλευρά του πελάτη, ανακατευθύνετε το αίτημα σε ένα μόνο αρχείο HTML και ο διακομιστής θα το παραδώσει χωρίς περιεχόμενο (ή με οθόνη φόρτωσης) έως ότου λάβετε όλο το JavaScript και αφήσετε το πρόγραμμα περιήγησης να συντάξει τα πάντα πριν από την απόδοση του περιεχομένου.
Σε καλή και αξιόπιστη σύνδεση στο Διαδίκτυο, είναι αρκετά γρήγορο και λειτουργεί καλά. Αλλά μπορεί να είναι πολύ καλύτερο και δεν χρειάζεται να είναι δύσκολο να το κάνουμε έτσι. Αυτό θα δούμε στις ακόλουθες ενότητες.
Απόδοση διακομιστή (SSR)
Μια λύση SSR είναι κάτι που κάναμε πολλά, πριν από πολλά χρόνια, αλλά τείνουμε να ξεχνάμε υπέρ μιας λύσης απόδοσης από την πλευρά του πελάτη.
πώς θα διενεργούσατε συνεντεύξεις χρηστών αν προσπαθούσατε να δοκιμάσετε μια συγκεκριμένη αλληλεπίδραση;
Με παλαιός λύσεις απόδοσης από διακομιστή, δημιουργήσατε μια ιστοσελίδα - με την PHP για παράδειγμα - ο διακομιστής συνέταξε τα πάντα, περιλάμβανε τα δεδομένα και παρέδωσε μια πλήρως συμπληρωμένη σελίδα HTML στον πελάτη. Ήταν γρήγορο και αποτελεσματικό.
Αλλά… κάθε φορά που πλοηγηθήκατε σε άλλη διαδρομή, ο διακομιστής έπρεπε να κάνει τη δουλειά ξανά: Λήψη του αρχείου PHP, μεταγλώττιση και παράδοση του HTML, με όλα τα CSS και JS να καθυστερούν τη φόρτωση της σελίδας σε μερικές εκατοντάδες ms ή ακόμα και ολόκληρα δευτερόλεπτα.
Τι γίνεται αν θα μπορούσατε να κάνετε τη φόρτωση της πρώτης σελίδας με τη λύση SSR και, στη συνέχεια, να χρησιμοποιήσετε ένα πλαίσιο για να κάνετε δυναμική δρομολόγηση με AJAX, λαμβάνοντας μόνο τα απαραίτητα δεδομένα;
Αυτός είναι ο λόγος για τον οποίο το SSR αποκτά ολοένα και μεγαλύτερη έλξη στην κοινότητα, επειδή το React διαδίδει αυτό το πρόβλημα με μια εύχρηστη λύση: RenderToString μέθοδος.
Αυτό το νέο είδος εφαρμογής ιστού ονομάζεται a καθολική εφαρμογή ή ένα ισομορφική εφαρμογή . Υπάρχει ακόμη κάποια διαμάχη σχετικά με τις ακριβείς έννοιες αυτών των όρων και τη σχέση μεταξύ τους, αλλά πολλοί άνθρωποι τους χρησιμοποιούν εναλλακτικά.
Τέλος πάντων, το πλεονέκτημα αυτής της λύσης είναι η ανάπτυξη μιας εφαρμογής διακομιστή και πελάτη με τον ίδιο κώδικα και να προσφέρει μια πολύ γρήγορη εμπειρία στον χρήστη με προσαρμοσμένα δεδομένα. Το μειονέκτημα είναι ότι πρέπει να εκτελέσετε έναν διακομιστή.
Το SSR χρησιμοποιείται για τη λήψη δεδομένων και την προ-συμπλήρωση μιας σελίδας με προσαρμοσμένο περιεχόμενο, αξιοποιώντας την αξιόπιστη σύνδεση στο Διαδίκτυο του διακομιστή. Δηλαδή, η σύνδεση στο Διαδίκτυο του διακομιστή είναι καλύτερη από εκείνη ενός χρήστη με ψέμα-fi ), επομένως είναι σε θέση να προκαταλάβει και να συγχωνεύσει δεδομένα προτού τα παραδώσει στον χρήστη.
Με τα προσυμπληρωμένα δεδομένα, η χρήση μιας εφαρμογής SSR μπορεί επίσης να διορθώσει ένα ζήτημα που έχουν οι εφαρμογές που παρέχονται από πελάτες με την κοινή χρήση κοινωνικών δικτύων και το σύστημα OpenGraph. Για παράδειγμα, εάν έχετε μόνο ένα index.html αρχείο για παράδοση στον πελάτη, θα έχουν μόνο έναν τύπο μεταδεδομένων - πιθανότατα τα μεταδεδομένα της αρχικής σελίδας σας. Αυτό δεν θα είναι συμφραζόμενο όταν θέλετε να μοιραστείτε μια διαφορετική διαδρομή, επομένως καμία από τις διαδρομές σας δεν θα εμφανίζεται σε άλλους ιστότοπους με το κατάλληλο περιεχόμενο χρήστη (περιγραφή και εικόνα προεπισκόπησης) που οι χρήστες θα ήθελαν να μοιραστούν με τον κόσμο.
Προ-απόδοση
Ο υποχρεωτικός διακομιστής για μια καθολική εφαρμογή μπορεί να είναι αποτρεπτικός για ορισμένους και μπορεί να είναι υπερβολικός για μια μικρή εφαρμογή. Γι 'αυτό η προ-απόδοση μπορεί να είναι μια πολύ καλή εναλλακτική λύση.
Ανακάλυψα αυτήν τη λύση με Πρακτικό και το δικό του CLI που σας επιτρέπει να μεταγλωττίσετε όλες τις προεπιλεγμένες διαδρομές, ώστε να μπορείτε να αποθηκεύσετε ένα πλήρες αρχείο HTML σε ένα στατικός υπηρέτης. Αυτό σας επιτρέπει να προσφέρετε μια εξαιρετικά γρήγορη εμπειρία στον χρήστη, χάρη στη λειτουργία ενυδάτωσης Preact / React, χωρίς την ανάγκη Node.js.
Το catch είναι, επειδή δεν είναι SSR, δεν έχετε δεδομένα συγκεκριμένου χρήστη για εμφάνιση σε αυτό το σημείο - είναι απλώς ένα στατικό (και κάπως γενικό) αρχείο που αποστέλλεται απευθείας στο πρώτο αίτημα, ως έχει. Επομένως, εάν έχετε δεδομένα συγκεκριμένα για τον χρήστη, εδώ μπορείτε να ενσωματώσετε έναν όμορφα σχεδιασμένο σκελετό για να δείξετε στον χρήστη ότι τα δεδομένα του έρχονται, για να αποφύγετε κάποια απογοήτευση από την πλευρά τους:
Υπάρχει μια άλλη σύλληψη: Για να λειτουργήσει αυτή η τεχνική, πρέπει να έχετε έναν διακομιστή μεσολάβησης ή κάτι για να ανακατευθύνετε το χρήστη στο σωστό αρχείο.
πρέπει να μάθετε το c πριν από το c++
Γιατί;
Με μια εφαρμογή μίας σελίδας, πρέπει να ανακατευθύνετε όλα τα αιτήματα στο ριζικό αρχείο και, στη συνέχεια, το πλαίσιο ανακατευθύνει τον χρήστη με το ενσωματωμένο σύστημα δρομολόγησης. Έτσι, η φόρτωση της πρώτης σελίδας είναι πάντα το ίδιο ριζικό αρχείο.
Για να λειτουργήσει μια λύση προ-απόδοσης, πρέπει να πείτε στον διακομιστή μεσολάβησης ότι ορισμένες διαδρομές χρειάζονται συγκεκριμένα αρχεία και όχι πάντα τη ρίζα index.html αρχείο.
Για παράδειγμα, ας υποθέσουμε ότι έχετε τέσσερις διαδρομές (/, /about, /jobs και blog) και όλες έχουν διαφορετικές διατάξεις. Χρειάζεστε τέσσερα διαφορετικά αρχεία HTML για να παραδώσετε το σκελετό στον χρήστη που θα το αφήσει Αντιδρώ / Preact / κλπ. την ενυδάτωση με δεδομένα. Έτσι, εάν ανακατευθύνετε όλες αυτές τις διαδρομές στη ρίζα index.html αρχείο, η σελίδα θα έχει μια δυσάρεστη, δυσάρεστη αίσθηση κατά τη φόρτωση, οπότε ο χρήστης θα δει τον σκελετό της λάθος σελίδας έως ότου ολοκληρωθεί η φόρτωση και αντικαθιστά τη διάταξη. Για παράδειγμα, ο χρήστης μπορεί να δει έναν σκελετό αρχικής σελίδας με μία μόνο στήλη, όταν είχαν ζητήσει μια διαφορετική σελίδα με μια γκαλερί τύπου Pinterest.
Η λύση είναι να πείτε στον πληρεξούσιο ότι κάθε μία από αυτές τις τέσσερις διαδρομές χρειάζεται ένα συγκεκριμένο αρχείο:
https://my-website.com→ Ανακατεύθυνση στη ρίζαindex.htmlαρχείοhttps://my-website.com/about→ Ανακατεύθυνση στο/about/index.htmlαρχείοhttps://my-website.com/jobs→ Ανακατεύθυνση στο/jobs/index.htmlαρχείοhttps://my-website.com/blog→ Ανακατεύθυνση στο/blog/index.htmlαρχείο
Αυτός είναι ο λόγος για τον οποίο αυτή η λύση μπορεί να είναι χρήσιμη για μικρές εφαρμογές - μπορείτε να δείτε πόσο επώδυνη θα ήταν αν είχατε μερικές εκατοντάδες σελίδες.
γυαλί steagall πράξη κατάργηση συνέπειες
Ακριβώς, δεν είναι υποχρεωτικό να το κάνετε με αυτόν τον τρόπο - θα μπορούσατε απλώς να χρησιμοποιήσετε ένα στατικό αρχείο απευθείας. Για παράδειγμα, https://my-website.com/about/ θα λειτουργήσει χωρίς κατεύθυνση διότι θα αναζητήσει αυτόματα ένα index.html μέσα στον κατάλογό του. Αλλά χρειάζεστε αυτόν τον πληρεξούσιο εάν έχετε παραμέτρους url— https://my-website.com/profile/guillaume θα χρειαστεί να ανακατευθύνετε το αίτημα στο /profile/index.html με τη δική του διάταξη, γιατί profile/guillaume/index.html δεν υπάρχει και θα προκαλέσει σφάλμα 404.
Εν ολίγοις, υπάρχουν τρεις βασικές προβολές που παίζονται με τις στρατηγικές απόδοσης που περιγράφονται παραπάνω: Μια οθόνη φόρτωσης, ένας σκελετός και η πλήρης σελίδα μόλις επιτευχθεί τελικά.
Ανάλογα με τη στρατηγική, μερικές φορές χρησιμοποιούμε και τις τρεις αυτές προβολές και μερικές φορές μεταβαίνουμε κατευθείαν σε μια σελίδα με πλήρη απόδοση. Μόνο σε μία περίπτωση χρήσης είμαστε αναγκασμένοι να χρησιμοποιήσουμε μια διαφορετική προσέγγιση:
| Μέθοδος | Προσγείωση (π.χ. /) | Στατικό (π.χ. /about) | Διορθώθηκε δυναμικό (π.χ. /news) | Παράμετρος δυναμικής (π.χ. /users/:user-id) |
|---|---|---|---|---|
| Πελάτης-απόδοση | Φόρτωση → Πλήρης | Φόρτωση → Πλήρης | Φόρτωση → Σκελετός → Πλήρης | Φόρτωση → Σκελετός → Πλήρης |
| Προ-απόδοση | Γεμάτος | Γεμάτος | Σκελετός → Πλήρης | HTTP 404 (η σελίδα δεν βρέθηκε) |
| Προ-απόδοση με διακομιστή μεσολάβησης | Γεμάτος | Γεμάτος | Σκελετός → Πλήρης | Σκελετός → Πλήρης |
| SSR | Γεμάτος | Γεμάτος | Γεμάτος | Γεμάτος |
Η απόδοση μόνο για πελάτες δεν είναι αρκετή
Οι εφαρμογές που παρέχονται από πελάτες είναι κάτι που πρέπει να αποφύγουμε τώρα, επειδή μπορούμε να κάνουμε καλύτερα για τον χρήστη. Και το να κάνεις καλύτερα, σε αυτήν την περίπτωση, είναι τόσο εύκολο όσο η λύση πριν την απόδοση. Είναι σίγουρα μια βελτίωση σε σχέση με την απόδοση μόνο για πελάτες και είναι πιο εύκολο να εφαρμοστεί από μια εφαρμογή που παρέχεται από διακομιστή.
Μια εφαρμογή SSR / καθολική μπορεί να είναι πραγματικά ισχυρή αν έχετε μια μεγάλη εφαρμογή με πολλές διαφορετικές σελίδες. Επιτρέπει στο περιεχόμενό σας να είναι εστιασμένο και σχετικό όταν μιλάτε σε ένα πρόγραμμα ανίχνευσης κοινωνικών δικτύων. Αυτό ισχύει επίσης για τα ρομπότ μηχανών αναζήτησης, τα οποία λαμβάνουν τώρα υπόψη την απόδοση του ιστότοπού σας κατά την κατάταξή του.
πώς να προσομοιώσετε το Μόντε Κάρλο
Μείνετε συντονισμένοι για ένα σεμινάριο παρακολούθησης, όπου θα ακολουθήσω τη μετατροπή ενός SPA σε προ-παραδοθείσες και SSR εκδόσεις και θα συγκρίνω την απόδοσή τους.
Σχετίζεται με: Επισκόπηση των δημοφιλών δημιουργών στατικών ιστότοπωνΚατανόηση των βασικών
Τι είναι η απόδοση από την πλευρά του πελάτη;
Η απόδοση από την πλευρά του πελάτη επιτρέπει στους προγραμματιστές να κάνουν τους ιστότοπούς τους πλήρως παρασχεμένους στο πρόγραμμα περιήγησης με JavaScript. Αντί να έχει διαφορετική σελίδα HTML ανά διαδρομή, ένας ιστότοπος που αποδίδεται από τον πελάτη δημιουργεί κάθε διαδρομή δυναμικά απευθείας στο πρόγραμμα περιήγησης. Αυτή η προσέγγιση εξαπλώθηκε όταν τα πλαίσια JS το καθιστούσαν εύκολο.
Τι είναι η απόδοση από την πλευρά του διακομιστή;
Η απόδοση από διακομιστή επιτρέπει στους προγραμματιστές να συμπληρώνουν μια ιστοσελίδα με προσαρμοσμένα δεδομένα χρήστη απευθείας στον διακομιστή. Είναι γενικά πιο γρήγορο να υποβάλετε όλα τα αιτήματα σε έναν διακομιστή παρά να κάνετε επιπλέον δρομολόγια από πρόγραμμα περιήγησης σε διακομιστή. Αυτό έκαναν οι προγραμματιστές πριν από την απόδοση του πελάτη.
Ποια είναι η διαφορά μεταξύ απόδοσης από πλευράς πελάτη και διακομιστή;
Η απόδοση από πλευράς πελάτη διαχειρίζεται τη δρομολόγηση δυναμικά χωρίς να ανανεώνει τη σελίδα κάθε φορά που ένας χρήστης ζητά διαφορετική διαδρομή. Ωστόσο, η απόδοση από την πλευρά του διακομιστή είναι σε θέση να εμφανίσει μια πλήρως συμπληρωμένη σελίδα κατά την πρώτη φόρτωση για οποιαδήποτε διαδρομή του ιστότοπου, ενώ η απόδοση από την πλευρά του πελάτη εμφανίζει πρώτα μια κενή σελίδα.
Τι είναι η προ-απόδοση;
Η προ-απόδοση είναι μια ανταλλαγή μεταξύ απόδοσης από πλευράς πελάτη και διακομιστή. Κάθε προ-απόδοση της σελίδας εμφανίζει ένα πρότυπο σκελετού ενώ τα δεδομένα περιμένουν να ενυδατωθούν με αιτήματα AJAX / XHR. Μόλις ληφθεί η σελίδα, η εσωτερική δρομολόγηση γίνεται δυναμικά για να επωφεληθεί από έναν ιστότοπο που παρέχεται από πελάτη.
Τι είναι μια καθολική εφαρμογή;
Μια καθολική εφαρμογή στέλνει στο πρόγραμμα περιήγησης μια σελίδα με δεδομένα. Στη συνέχεια, η εφαρμογή φορτώνει τη JavaScript και ενυδατώνει ξανά τη σελίδα για να αποκτήσει μια πλήρως εκτεθειμένη εφαρμογή από την πλευρά του πελάτη. Αυτή η προσέγγιση συνδυάζει τα πλεονεκτήματα των τελευταίων διαθέσιμων τεχνικών σήμερα.
