Αύξηση της απόδοσης του Ιστού και του SEO

Εάν έχετε αλληλεπιδράσει με το SEO για χρόνια, μπορεί να έχετε ήδη συναντήσει το Server Side Rendering (SSR) ως μία από τις έννοιες. Γιατί να επιλέξετε την απόδοση από την πλευρά του διακομιστή (SSR) αντί για την απόδοση από την πλευρά του πελάτη;

Σε αυτόν τον οδηγό, θα εισαγάγω την έννοια του Server Side Rendering (SSR), τη σημασία του στη σύγχρονη ανάπτυξη ιστού και θα διαφοροποιήσω μεταξύ Server Side Rendering και Client Side Rendering. Θα εισαγάγουμε επίσης πλαίσια και βιβλιοθήκες που υποστηρίζουν απόδοση από την πλευρά του διακομιστή και πώς το κάνουν.

Τι είναι η απόδοση από την πλευρά του διακομιστή (SSR);

Η απόδοση από την πλευρά του διακομιστή (SSR) είναι μια τεχνική ανάπτυξης ιστού όπου το περιεχόμενο μιας ιστοσελίδας αποδίδεται στον διακομιστή αντί στο πρόγραμμα περιήγησης του πελάτη.

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

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

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

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

Η απόδοση από την πλευρά του διακομιστή χρησιμοποιεί πλαίσια ιστού όπως το Vue.js και το Gatsby.js στα παρασκήνια για να δημιουργήσει δυναμικά μια πλήρως λειτουργική σελίδα HTML.

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

Πίστωση εικόνας: reactpwa

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

• Ο πελάτης στέλνει ένα αίτημα HTTP: Ένας χρήστης εισάγει μια διεύθυνση στη γραμμή διευθύνσεων του προγράμματος περιήγησης. Το πρόγραμμα περιήγησης δημιουργεί μια σύνδεση HTTP και στέλνει ένα αίτημα στον διακομιστή.
• Ανάκτηση δεδομένων: Ο διακομιστής ανακτά δεδομένα από τα API ή τη βάση δεδομένων.
• Προ-απόδοση: Ο διακομιστής συγκεντρώνει όλα τα απαιτούμενα στοιχεία JavaScript σε στατικό HTML και στέλνει αυτό το HTML στο πρόγραμμα περιήγησης πελάτη.
• Φόρτωση και απόδοση σελίδας: Ο πελάτης πραγματοποιεί λήψη και εμφανίζει το HTML από τον διακομιστή.
• Ενυδάτωση: Ο πελάτης τελικά κατεβάζει όλο τον κώδικα JavaScript για να προσθέσει διαδραστικότητα στη σελίδα HTML.

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

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

Χαρακτηριστικά Απόδοση από την πλευρά του διακομιστή (SSR) Απόδοση από την πλευρά του πελάτη (CSR) Χρόνος αρχικής φόρτωσης Γρήγορος χρόνος αρχικής φόρτωσης Μπορεί να είναι αργός καθώς βασίζεται στη φόρτωση από την πλευρά του πελάτη Εμπειρία χρήστη Βελτιωμένη και βελτιωμένη εμπειρία χρήστη κατά την πρώτη επίσκεψηΜπορεί, κατά καιρούς, να έχει ως αποτέλεσμα πιο αργό εμπειρία χρήστη στην πρώτη αλληλεπίδραση αλλά αυξάνεται στις επόμενες επισκέψειςΠροσβασιμότητα Όλο το βασικό περιεχόμενο φορτώνεται με το αρχικό έγγραφο HTML που αποδίδεται στον διακομιστή Η προσβασιμότητα μπορεί να είναι ένα πρόβλημα, ειδικά όταν οι χρήστες έχουν απενεργοποιήσει το JavaScriptSEO performanceSSR σημαδεύει όλα τα σωστά πλαίσια για SEOΜερικές μηχανές αναζήτησης μπορεί να το βρουν δύσκολο να ευρετηριαστούν κάποιες δυναμικά δημιουργημένες σελίδες στην πλευρά του πελάτηΚλιμακότηταΕίναι εύκολο να κλιμακωθούν ιστότοποι υψηλής επισκεψιμότητας που χρησιμοποιούν απόδοση από την πλευρά του διακομιστή Οι προγραμματιστές πρέπει να βρουν μια καλά μελετημένη προσέγγιση για την κλίμακα ιστοτόπων που εφαρμόζουν την απόδοση από την πλευρά του πελάτηΑσφάλειαΕίναι εύκολο να μειωθεί ο διακομιστής -Ευπάθειες στην πλευρά όταν φορτώνονται σελίδες στον διακομιστή. Επιρρεπείς σε επιθέσεις όπως δέσμες ενεργειών μεταξύ τοποθεσιών (XSS) και άλλες ευπάθειες που σχετίζονται με την απόδοση από την πλευρά του πελάτη.

Οφέλη της απόδοσης από την πλευρά του διακομιστή για SEO

• Γρήγορος χρόνος αρχικής φόρτωσης: Ο χρόνος που χρειάζεται για να φορτώσει μια σελίδα είναι ένας από τους παράγοντες που εξετάζουν οι επισκέπτες στον ιστότοπό σας. Το SSR επιτρέπει στους χρήστες του ιστότοπου να βλέπουν μια πλήρως φορτωμένη σελίδα HTML σχεδόν αμέσως. Η άμεση φόρτωση μειώνει το χρόνο αναμονής του χρήστη πριν αλληλεπιδράσει με μια ιστοσελίδα.
• Γρήγορη απόδοση σε αργές συσκευές/δίκτυα: Το δίκτυο που χρησιμοποιούν οι χρήστες για πρόσβαση στις ιστοσελίδες σας μπορεί να είναι αργό ή να χρησιμοποιούν συσκευές που εκτελούνται σε όχι και τόσο γρήγορα λειτουργικά συστήματα. Η απόδοση από την πλευρά του διακομιστή σημαίνει ότι οι συσκευές χρήστη δεν χρειάζεται να εκτελούν τόσο πολύ JavaScript, γεγονός που αυξάνει την απόδοσή τους. Τέτοια δίκτυα ή συσκευές δεν χρειάζονται πλέον πολύ εύρος ζώνης ή επεξεργαστική ισχύ για να εμφανίσουν τις φορτωμένες σελίδες HTML.
• Συνεπής εμπειρία χρήστη: Το SSR σάς επιτρέπει να δημιουργήσετε μια καλή πρώτη εντύπωση μέσω του Time to First Paint (TTFP). Αυτοί οι χρήστες θα αντιληφθούν τον ιστότοπό σας ως πρώτο όταν οι σελίδες HTML φορτώνονται γρήγορα, χάρη στην απόδοση από την πλευρά του διακομιστή.
• Βελτιωμένο SEO: Οι μηχανές αναζήτησης όπως το Google, το Bing και το YouTube λαμβάνουν υπόψη πολλά πράγματα όταν ταξινομούν ιστοσελίδες. Για παράδειγμα, θα ελέγξουν την εμπειρία χρήστη, τον χρόνο που ξοδεύουν οι χρήστες στις σελίδες σας και την ταχύτητα φόρτωσης. Το SSR βελτιώνει όλους αυτούς τους τομείς, πράγμα που σημαίνει ότι η εφαρμογή σας πιθανότατα θα κατατάσσεται υψηλότερα στις μηχανές αναζήτησης.
• Εύκολος χειρισμός δυναμικού περιεχομένου: Οι μηχανές αναζήτησης αγαπούν το δυναμικό περιεχόμενο. Με το SSR, οι προγραμματιστές μπορούν πλέον να χειρίζονται εύκολα δυναμικό περιεχόμενο και επίσης να εξατομικεύουν/προσαρμόζουν το περιεχόμενο με βάση τις εισροές και τις προτιμήσεις των χρηστών.
• Επεκτασιμότητα και προσωρινή αποθήκευση: Στο SSR, ο διακομιστής κάνει την αρχική φόρτωση, η οποία μειώνει τον όγκο της επεξεργασίας που πρέπει να χειριστεί ο πελάτης και την κάνει πιο επεκτάσιμη. Το SSR μπορεί επίσης να χρησιμοποιήσει προσωρινή αποθήκευση σε επίπεδο διακομιστή και δικτύου παράδοσης περιεχομένου (CDN) για τη μείωση του φόρτου του διακομιστή και τη βελτίωση της απόδοσης.

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

Vue.js

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

Τα στοιχεία Vue, από προεπιλογή, παράγουν και χειρίζονται το μοντέλο αντικειμένου εγγράφου (DOM) στο πρόγραμμα περιήγησης ως έξοδο. Ωστόσο, αυτό το πλαίσιο χρησιμοποιεί επίσης SSR για την απόδοση τέτοιων στοιχείων σε συμβολοσειρές HTML στον διακομιστή και την αποστολή τους απευθείας στο πρόγραμμα περιήγησης. Μια εφαρμογή Vue που αποδίδεται από διακομιστή θεωρείται «καθολική», καθώς το μεγαλύτερο μέρος του κώδικα εκτελείται στον διακομιστή και στον πελάτη.

React.js

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

Το React έχει σχεδιαστεί για να υλοποιεί από προεπιλογή απόδοση τόσο από την πλευρά του πελάτη όσο και από την πλευρά του διακομιστή. Εάν χρειάζεται να εφαρμόσετε απόδοση από την πλευρά του διακομιστή σε μια εφαρμογή React, πρέπει να τη ρυθμίσετε χρησιμοποιώντας ένα πλαίσιο εφαρμογής Node.js όπως το Express.js. Πρέπει επίσης να ενημερώσετε τα σενάρια σας στο αρχείο package.json για να διασφαλίσετε ότι η εφαρμογή “ξεκινά” από τον διακομιστή Express.

Γκάτσμπι

Γκάτσμπι είναι ένα πλαίσιο που βασίζεται στο React για τη δημιουργία ιστοσελίδων. Αυτό το πλαίσιο ανοιχτού κώδικα έχει σχεδιαστεί για να βοηθά τους προγραμματιστές να δημιουργούν γρήγορες εφαρμογές Ιστού. Το Gatsby ενσωματώνεται με διάφορα συστήματα διαχείρισης περιεχομένου όπως το Drupal και το WordPress, καθιστώντας εύκολη την ανάκτηση δεδομένων.

Χρειάζεστε έναν διακομιστή Node.js για εγκατάσταση απόδοση από την πλευρά του διακομιστή στο Gatsby. Το SSR εκτελείται στο Gatsby Cloud, όπου κάθε αίτημα αποστέλλεται σε μια διεργασία εργασίας στη συνάρτηση getServerData. Όλα τα δεδομένα από τη διαδικασία εργασίας μεταβιβάζονται στο στοιχείο React που επιστρέφει ένα έγγραφο HTML.

Γωνιώδης

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

Όπως το React, έτσι και το Angular δεν εφαρμόζει το SSR από προεπιλογή. Ωστόσο, μπορείτε να ρυθμίσετε την εφαρμογή Angular ώστε να υλοποιεί απόδοση από την πλευρά του διακομιστή συνδυάζοντάς την με το Express.js, ένα πλαίσιο υποστήριξης node.js. Το Angular Universal σάς επιτρέπει να αποδώσετε στοιχεία Angular στον διακομιστή και να μειώσετε τον αρχικό χρόνο φόρτωσης.

Πώς να ελέγξετε εάν ένας ιστότοπος χρησιμοποιεί SSR ή CSR

Εάν είστε προγραμματιστής ή έμπορος, είναι δύσκολο να προσδιορίσετε εάν ένας ιστότοπος χρησιμοποιεί απόδοση διακομιστή ή πελάτη όταν τον επισκέπτεστε. Ευτυχώς, μπορείτε να επιθεωρήσετε έναν ιστότοπο για να προσδιορίσετε την προσέγγιση απόδοσης που χρησιμοποιεί. Μπορούμε να επιθεωρήσουμε τον ιστότοπό μας grtechpc.org για να το δείξουμε. Θα κάνω δεξί κλικ σε οποιαδήποτε σελίδα και μετά θα επιλέξω «Προβολή πηγής σελίδας».

Εάν μπορείτε να δείτε ετικέτες όπως ,

και

, τότε είστε βέβαιοι ότι εκτελούνται από την πλευρά του διακομιστή.







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

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

Η απόδοση από την πλευρά του διακομιστή είναι ίδια με την προσθήκη ετικετών από την πλευρά του διακομιστή;

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

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

συμπέρασμα

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

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

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