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

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

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

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

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

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

Πώς λειτουργεί η απόδοση από διακομιστή

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

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

  • Η ταχύτητά σας στο Διαδίκτυο
  • τη θέση του διακομιστή
  • πόσους χρήστες προσπαθούν να αποκτήσουν πρόσβαση στον ιστότοπο
  • και πόσο βελτιστοποιημένος είναι ο ιστότοπος, για να αναφέρουμε μερικά

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

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

Πάρτε για παράδειγμα αυτό το έγγραφο HTML που έχει τοποθετηθεί σε έναν φανταστικό διακομιστή με διεύθυνση HTTP example.testsite.com.

    Example Website   

My Website

This is an example of my new website

Link

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

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

    Example Website   

My Website

This is an example of my new website

This is some more content from the other.html

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

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

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

Πώς λειτουργεί η απόδοση από την πλευρά του πελάτη

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

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

Επιστρέφοντας στον προηγούμενο ιστότοπο, example.testsite.comας υποθέσουμε ότι έχετε πλέον ένα αρχείο index.html με τις ακόλουθες γραμμές κώδικα.

    Example Website 

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

Για αρχάριους, αντί να έχετε το περιεχόμενο μέσα στο αρχείο HTML, έχετε ένα κοντέινερ div με ένα αναγνωριστικό ρίζας. Έχετε επίσης δύο στοιχεία σεναρίου ακριβώς πάνω από την ετικέτα κλεισίματος σώματος. Ένα που θα φορτώσει τη βιβλιοθήκη JavaScript του Vue.js και ένα που θα φορτώσει ένα αρχείο που ονομάζεται app.js.

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

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

Για να το διορθώσετε, θα τοποθετήσετε τις ακόλουθες γραμμές κώδικα στο αρχείο app.js.

var data = { title:"My Website", message:"This is an example of my new website" } Vue.component('app', { template: ` 

{{title}}

{{message}}

Link `, data: function() { return data; }, methods:{ newContent: function(){ var node = document.createElement('p'); var textNode = document.createTextNode('This is some more content from the other.html'); node.appendChild(textNode); document.getElementById('moreContent').appendChild(node); } } }) new Vue({ el: '#root', });

Τώρα, αν επισκεφθείτε τη διεύθυνση URL, θα δείτε το ίδιο περιεχόμενο με το παράδειγμα του διακομιστή. Η βασική διαφορά είναι ότι εάν επρόκειτο να κάνετε κλικ στον σύνδεσμο της σελίδας για να φορτώσετε περισσότερο περιεχόμενο, το πρόγραμμα περιήγησης δεν θα υποβάλει άλλο αίτημα στον διακομιστή. Αποδίδετε στοιχεία με το πρόγραμμα περιήγησης, επομένως θα χρησιμοποιήσει JavaScript για να φορτώσει το νέο περιεχόμενο και το Vue.js θα διασφαλίσει ότι αποδίδεται μόνο το νέο περιεχόμενο. Όλα τα υπόλοιπα θα μείνουν μόνα τους.

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

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

Ένα άλλο πράγμα που πρέπει να θυμάστε είναι ότι ο ιστότοπος / η εφαρμογή σας δεν θα μπορεί να φορτώσει έως ότου ολοκληρωθεί η λήψη ΟΛΩΝ του JavaScript στο πρόγραμμα περιήγησης. Αυτό έχει νόημα, καθώς περιέχει όλο το περιεχόμενο που θα χρειαστεί. Εάν οι χρήστες σας χρησιμοποιούν αργή σύνδεση στο Διαδίκτυο, θα μπορούσε να κάνει τον αρχικό χρόνο φόρτωσης λίγο πολύ.

Τα πλεονεκτήματα και τα μειονεκτήματα κάθε προσέγγισης

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

Ακολουθεί μια γρήγορη ανάλυση των πλεονεκτημάτων και των μειονεκτημάτων για κάθε προσέγγιση:

Πλεονεκτήματα από τον διακομιστή:

  1. Οι μηχανές αναζήτησης μπορούν να ανιχνεύσουν τον ιστότοπο για καλύτερο SEO.
  2. Η αρχική φόρτωση σελίδας είναι ταχύτερη.
  3. Ιδανικό για στατικούς ιστότοπους.

Μειονεκτήματα από τον διακομιστή:

  1. Συχνές αιτήσεις διακομιστή.
  2. Μια συνολική αργή απόδοση σελίδας.
  3. Επαναφορτώσεις πλήρους σελίδας.
  4. Μη εμπλουτισμένες αλληλεπιδράσεις ιστότοπου.

Πλεονεκτήματα από τον πελάτη:

  1. Πλούσιες αλληλεπιδράσεις ιστότοπου
  2. Γρήγορη απόδοση ιστότοπου μετά την αρχική φόρτωση.
  3. Ιδανικό για εφαρμογές Ιστού.
  4. Ισχυρή επιλογή βιβλιοθηκών JavaScript.

Μειονεκτήματα από τον πελάτη:

  1. Χαμηλό SEO εάν δεν εφαρμοστεί σωστά.
  2. Το αρχικό φορτίο μπορεί να απαιτεί περισσότερο χρόνο.
  3. Στις περισσότερες περιπτώσεις, απαιτείται εξωτερική βιβλιοθήκη.

Αν θέλετε να μάθετε περισσότερα για το Vue.js, ανατρέξτε στον ιστότοπό μου στο juanmvega.com για βίντεο και άρθρα!