CSR, SSR, SSG, ISR: Πώς να επιλέξετε το σωστό παράδειγμα απόδοσης

Τα σύγχρονα πλαίσια web προσφέρουν πολλές επιλογές για τον τρόπο παράδοσης ενός ιστότοπου ή μιας εφαρμογής από διακομιστή σε πελάτη. Μπορείτε να δημιουργήσετε HTML και από τις δύο πλευρές ή να το προ-αποδώσετε για διανομή υψηλής ταχύτητας μέσω ενός δικτύου παράδοσης περιεχομένου.

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

Λάβετε υπόψη όλους αυτούς τους παράγοντες για να σταθμίσετε τα πλεονεκτήματα και τα μειονεκτήματα κάθε παραδείγματος απόδοσης.

Απόδοση ιστοτόπων με περισσότερους από έναν τρόπους

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

Κάθε μέθοδος έχει τα πλεονεκτήματα και τα μειονεκτήματά της και γνωρίζοντας τα πλεονεκτήματα και τα μειονεκτήματα της καθεμίας μπορεί να σας βοηθήσει να επιλέξετε τη σωστή για τον ιστότοπό σας.

CSR: Το πρόγραμμα περιήγησης αναλαμβάνει τη φόρτιση

Το CSR σημαίνει απόδοση από την πλευρά του πελάτη. Όταν αποδίδετε μια εφαρμογή ή ιστότοπο από την πλευρά του πελάτη, ο διακομιστής μεταδίδει ελάχιστα έως καθόλου HTML εκτός από ένα μικρό κομμάτι κώδικα boilerplate. Στη συνέχεια, η σελίδα ζητά τα δεδομένα που χρειάζεται από τον διακομιστή, μετά το συμβάν φόρτωσης σελίδας, μέσω αιτημάτων AJAX.

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

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

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

SSR: Απόδοση σε κεντρικό διακομιστή

Το SSR σημαίνει απόδοση από την πλευρά του διακομιστή. Αυτή είναι μια πολύ πιο παραδοσιακή μορφή απόδοσης ιστοσελίδων στην οποία οι ιστότοποι δημιουργούν HTML με βάση πρότυπα και στέλνουν ένα μείγμα HTML, φύλλων στυλ και σεναρίων στον πελάτη. Η πλειονότητα των τα πιο δημοφιλή πλαίσια web backend εμπίπτουν σε αυτή την κατηγορία.

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

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

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

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

SSG: Ελαχιστοποιημένη απόδοση

Το SSG ή Static Site Generation, παρακάμπτει την ανάγκη δημιουργίας HTML από την πλευρά του πελάτη ή του διακομιστή. Αντίθετα, οι ιστότοποι και οι εφαρμογές τύπου SSG συντάσσουν εκ των προτέρων κάθε σελίδα που θα μπορούσαν να χρειαστούν και προωθούν τα αποτελέσματα σε ένα CDN για γρήγορη παράδοση.

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

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

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

ISR: Λίγο από όλα

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

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

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

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

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

Ποιος τύπος απόδοσης είναι ο καλύτερος;

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

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