Οι ιστοσελίδες-ιστότοποι χωρίζονται σε δύο βασικές κατηγορίες, σε στατικές (static sites) και σε δυναμικές (dynamic sites), σαν εμφάνιση μπορεί να μην έχουν μεγάλες διαφορές, αλλά σαν λειτουργία και δυνατότητες οι διαφορές είναι αρκετές και ουσιαστικές.

Οι γεννήτριες δημιουργίας στατικών ιστοσελίδων (Static Site Generators – SSG) τεχνικά είναι υποκατηγορία των στατικών ιστοσελίδων, στην κατηγορία των δυναμικών ιστοσελίδων περιλαμβάνονται ιστοσελίδες που έχουν δημιουργηθεί με κάποιο CMS ή framework όπως Wordpress, Drupal, Joomla κ.α.

Στατικές ιστοσελίδες

Η τρόπος λειτουργίας των στατικών ιστοσελίδων είναι σχετικά απλός, ουσιαστικά πρόκειται για έτοιμα αρχεία (HTML, CSS, εικόνες κ.α.) που βρίσκονται σε κάποιον server και όταν ζητηθεί η ιστοσελίδα από τον χρήστη ο server στέλνει αυτά τα αρχεία στο πρόγραμμα περιήγησης του χρήστη.

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

Πλεονεκτήματα στατικών ιστοσελίδων

  • Ταχύτητα, οι στατικές ιστοσελίδες είναι γρήγορες στην φόρτωση γιατί ο server δεν έχει να διαχειριστεί πολύπλοκα αιτήματα ή διαδικασίες παρά μόνο να στείλει την ιστοσελίδα στο πρόγραμμα περιήγησης του χρήστη.
  • Ασφάλεια, οι στατικές ιστοσελίδες δεν χρειάζονται βάσεις δεδομένων, scripts που πρέπει να τρέξουν ή να διαχειριστεί ο server για αυτό το λόγο δεν είναι ευάλωτες σε hackers και γενικά δεν έχουν ευπάθειες ασφαλείας που συναντάμε σε διάφορα CMS.
  • Κόστος, το κόστος φιλοξενίας μιας στατικής ιστοσελίδας είναι σχετικά μικρό συγκρίνοντας το με το κόστος φιλοξενίας μια ιστοσελίδας Wordpress.
  • Συντήρηση, μια στατική ιστοσελίδα δεν απαιτεί σχεδόν καθόλου συντήρηση εκτός αν θέλετε να κάνετε αλλαγές.

Μειονεκτήματα στατικών ιστοσελίδων

  • Η δημιουργία/ενημέρωση μιας στατικής ιστοσελίδας μπορεί να δείχνει απλή αλλά δεν είναι κάτι εύκολο για κάποιον που δεν γνωρίζει HTML-CSS-Javascript κ.α., οπότε απαιτούνται γνώσεις προγραμματισμού.
  • Σε πολλές περιπτώσεις οι στατικές ιστοσελίδες δεν μπορούν να εκτελέσουν πολύπλοκες εργασίες όπως αποστολή contact forms, προσθήκη και ενημέρωση σχολίων σε blog, για αυτό το σκοπό πρέπει να χρησιμοποιηθούν υπηρεσίες τρίτων με το ανάλογο κατά περίπτωση κόστος.
  • Ανεπάρκεια, εξαρτάται από τα άτομα που δημιουργούν και συντηρούν την  ιστοσελίδα, εάν δεν είναι σχολαστικά ή / και δεν διαθέτουν επαρκείς πόρους και γνώσεις, η ιστοσελίδα πιθανότατα να μην έχει το αναμενόμενο αποτέλεσμα.

Δυναμικές ιστοσελίδες

Οι δυναμικές ιστοσελίδες εμφανίστηκαν το 1993 με την έλευση του Common Gateway Interface (CGI). Το CGI είναι ένα σύνολο προτύπων για τον καθορισμό του τρόπου ανταλλαγής πληροφοριών μεταξύ διακομιστών.

Tο CGI επέτρεπε στους διακομιστές να κάνουν περισσότερα από απλώς να λαμβάνουν αιτήματα και να ανταποκρίνονται σε αυτά ως είσοδο/έξοδο.

Το συμβαίνει όταν ο χρήστης περιηγείται σε μια δυναμική ιστοσελίδα:

  1. Όταν ο χρήστης ζητά πρόσβαση σε έναν ιστότοπο, το πρόγραμμα περιήγησης ζητά αρχεία από το διακομιστή, το αίτημα θα μπορούσε να περιλαμβάνει μια απλή σελίδα περιεχομένου ,ένα ερώτημα αναζήτησης, μια υποβολή φόρμας ή ακόμη και έμμεσα δεδομένα (όπως η γεωγραφική σας τοποθεσία).
  2. Χρησιμοποιώντας τα κριτήρια που καθορίζονται από το CGI, ο διακομιστής ιστού μιλά με έναν άλλο διακομιστή (ο διακομιστής εφαρμογών) που επεξεργάζεται όλες τις εισόδους και κάνει μια λίστα με αυτό που χρειάζεται.
  3. Ο διακομιστής εφαρμογών θα μιλήσει με έναν άλλο διακομιστή, τη βάση δεδομένων, για να συλλέξει τις πληροφορίες που χρειάζεται, για παράδειγμα, το ιστορικό παραγγελιών σας ή τα προϊόντα που σας ενδιαφέρουν.
  4. Ο διακομιστής εφαρμογών μεταφράζει όλα αυτά σε μια γλώσσα που κατανοεί ο διακομιστής ιστού και στη συνέχεια τα στέλνει στον διακομιστή ιστού.
  5. Ο διακομιστής ιστού στέλνει τα δημιουργημένα αρχεία στο πρόγραμμα περιήγησής σας,
  6. Το πρόγραμμα περιήγησής σας αποδίδει τα αρχεία και σας παρουσιάζει τον ιστότοπο.

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

Οποιαδήποτε ιστοσελίδα που εξυπηρετείτε από μια βάση δεδομένων, μια Διεπαφή προγραμματισμού εφαρμογών (API), είναι ένας δυναμικός ιστότοπος. Οι περισσότεροι σύνθετοι ιστότοποι είναι δυναμικοί π.χ. Amazon, Facebook, Pinterest.

Οι ιστότοποι που δημιουργούνται από CMS όπως το WordPress, το Wix και το Shopify κ.α. είναι επίσης δυναμικοί.

Πλεονεκτήματα δυναμικών ιστοσελίδων

  • Όπως υποδηλώνει και το όνομα η ιστοσελίδα δημιουργείται από μια δέσμη συγκεκριμένων αιτημάτων ή και δεδομένων που συλλέγονται από την πλευρά του χρήστη.
  • Οι δυναμικοί ιστότοποι επιτρέπουν την διασύνδεση των CMS, των πλατφορμών ηλεκτρονικού εμπορίου και γενικότερα οποιασδήποτε πολυπλοκότητας.
  • Οι δυναμικοί ιστότοποι μπορούν να προβάλουν περιεχόμενο βάσει μεταβλητών που μπορούν να ορισθούν από τον χρήστη.
  • Η έλευση των πλατφορμών CMS έδωσε την δυνατότητα σε χρήστες χωρίς γνώσεις προγραμματισμού να δημιουργήσουν ιστότοπους.
  • Αμεση εγκατάσταση, η δημιουργία ενός ιστότοπου έγινε πολύ πιο γρήγορη. CMS όπως το Wordpress, Squarespace και το Shopify σας παρέχουν όλα τα εργαλεία για να δημιουργήσετε έναν ιστότοπο μέσα σε λίγα λεπτά.
  • Αυτοματισμοί, οι προσθήκες προϊόντων ή αναρτήσεων από μια πλατφόρμα σε μια άλλη είναι αυτοματοποιημένη.
  • Βελτιστοποίηση μηχανών αναζήτησης (SEO) – oriented, τα περισσότερα CMS είναι SEO ready σε ικανοποιητικό βαθμό.

Μειονεκτήματα δυναμικών ιστοσελίδων

  • Κόστος: ενώ το ίδιο το WordPress είναι δωρεάν, τα θέματα και πολλά πρόσθετα δεν είναι. Υπηρεσίες όπως το Wix και το Shopify έχουν μηνιαίο κόστος χρήσης. Εξιδεικευμένες αλλαγές, προσθήκες και συντήρηση επίσης δεν είναι δωρεάν.
  • Απαιτητικοί διακομιστές: Για την εκτέλεση του WordPress χρειάζεται ένα ελάχιστο setup από την πλευρά του διακομιστή, εκτός από το αυξημένο κόστος που μπορεί να έχετε χρειάζεται να γίνει και το κατάλληλο setup, αυτό είναι κάτι που πρέπει να γίνει από εξιδεικευμένο πρόσωπο με το ανάλογο κόστος.
  • Ταχύτητα: οι δυναμικές ιστοσελίδες λόγω των πολλών αιτημάτων έχουν μπορεί να έχουν σαν αποτέλεσμα αυξημένους χρόνους αναμονής από την πλευρά του χρήστη, τέτοιου είδους καθυστερήσεις ίσως δημιουργήσουν δυσαρεστημένους χρήστες.
  • Ασφάλεια: οι δυναμικοί ιστότοποι έχουν ευπάθειες και είναι ανοιχτοί σε επιθέσεις.Δεν είναι τυχαίο ότι  το 70% των ιστότοπων που έχουν δημιουργηθεί με WordPress είναι ευάλωτοι σε επιθέσεις.
  • Αστάθεια: οι μη αναμενόμενη αύξηση της επισκεψιμότητας μπορεί να υπερφορτώσει τον διακομιστή με αποτέλεσμα ο ιστότοπος να μην είναι προσβάσιμος, αυτό είναι κάτι που το βλέπουμε κατα περιόδους σε ιστότοπους που έχουν αυξημένη κίνηση πχ. περίοδος εκπτώσεων όπως Black Friday κ.α.
  • Μονοτονία: τυχαίνει δύο ή και παραπάνω διαφορετικές επιχειρήσεις να επιλέξουν το ίδιο theme για την ιστοσελίδα τους, αυτό έχει σαν αποτέλεσμα κάποιες φορές να βλέπουμε πανομοιότυπους ιστότοπους.

Static Site Generators

Τι ακριβώς είναι οι Static Site Generators

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

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

Αναλυτικά η διαδικασία έχει ως εξής:

  1. Ο ιστότοπος αποτελείται από αρχεία γλώσσας (Markup), αρχεία προτύπων (Templates), αρχεία δεδομένων (data files) και διάφορα στοιχεία (assets).
  2. Οι SSG αναλαμβάνουν ουσιαστικά τις ενέργειες που πρέπει να εκτελεστούν από την πλευρά του διακομιστή (για την δημιουργία των αρχείων HTML) και τις εκτελούν πριν από την δημιουργία του ιστότοπου. Το SSG επεξεργάζεται όλα τα δεδομένα από τα επιμέρους αρχεία και δημιουργεί τα αρχεία HTML, CSS και JavaScript - αυτά τα αρχεία είναι τα στατικά αρχεία που μεταφορτώνονται στο διακομιστή, οπότε το αποτέλεσμα που προκύπτει είναι ένας στατικός ιστότοπος.

Κάποια από τα πιο γνωστά SSG είναι:

  • Gatsby (React)
  • Jekyll (Ruby)
  • Next.js (React)
  • Hugo (Go)
  • Eleventy (Node.js)

Καινούργια SSG εμφανίζονται συνεχώς καθώς η χρήση αυτών υιοθετείται ευρύτερα.

Στο πλαίσιο των SSG, μπορεί να έχετε ακούσει για το JAMstack. Το JAMstack, σημαίνει JavaScript, API και Markup. Δημιουργήθηκε από προγραμματιστές που θέλουν να διατηρήσουν την ταχύτητα και την ασφάλεια των στατικών ιστότοπων, προσθέτοντας παράλληλα σε αυτούς χαρακτηριστικά δυναμικών ιστότοπων.

Ωστόσο δεν είναι όλα τα SSG μέρος του JAMstack, το JAMstack δεν αφορά μόνο τα SSG. (Διαβάστε περισσότερα σχετικά στο JAMstackWTF και στο JAMstack.org).

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

Τα τελευταία χρόνια έχουν προστεθεί πολλά εργαλεία στο οικοσύστημα των Static Site Generators SSGs προσθέτοντας τους πολλές δυνατότητες και ευκολίες που δεν είχαν στο παρελθόν ωστόσο παρόλο που το ποσοστό χρήσης τους δεν είναι μεγάλο η τάση είναι συνεχώς ανοδική.

Αν και οι SSG υπερτερούν σε ταχύτητα και ασφάλεια έναντι των γνωστών CMS (Wordpress κ.λ.π.) στην Ελλάδα αυτή τη στιγμή οι σελίδες που είναι φτιαγμένες με Static Generator είναι ελάχιστες, μια ενδιαφέρουσα σελίδα είναι της ομάδας ΟΥΠΣ το κουκλοθέατρο, η προσωπική μου ιστοσελίδα βασίζεται σε SSG, ενδιαφέρον έχει επίσης το eshop της Victoria Beckham και τέλος αυτός ο ιστότοπος βασίζεται σε SSG.

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

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

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

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