Η συζήτηση για την αρχιτεκτονική έρχεται συνήθως ως ερώτηση για το stack. Στατικό; Να φτιάχνεται στον server; Single-page application; Η ειλικρινής απάντηση είναι ότι η ερώτηση τίθεται σε λάθος επίπεδο. Ένα website δεν είναι ένα πράγμα. Είναι τριάντα διαδρομές, δηλαδή σελίδες ή ομάδες σελίδων. Η καθεμία αλλάζει με άλλο ρυθμό και δείχνει άλλα πράγματα σε άλλους επισκέπτες. Πολλά sites με σύγχρονη τεχνολογία είναι αργά για έναν λόγο: κάποιος απάντησε την ερώτηση μία φορά και την εφάρμοσε σε όλες.
Πάρτε τις διαδρομές που είναι ίδιες για κάθε επισκέπτη και αλλάζουν όταν το αποφασίσει ένας συντάκτης: η αρχική, οι σελίδες υπηρεσιών, το journal, τα νομικά κείμενα. Αυτές πρέπει να φτιάχνονται μία φορά, όταν χτίζεται το site (build), και να σερβίρονται ως έτοιμα αρχεία από ένα CDN, ένα δίκτυο servers κοντά στον αναγνώστη. Δεν μπαίνει βάση δεδομένων στη μέση, δεν υπάρχει server που πρέπει πρώτα να ξυπνήσει, δεν υπάρχει τίποτα να χαλάσει στις τρεις τα ξημερώματα. Και το πρώτο byte φτάνει από ένα μηχάνημα στην ίδια χώρα με τον αναγνώστη. Το μεγαλύτερο μέρος ενός εταιρικού site ανήκει σε αυτή την κατηγορία. Και τα περισσότερα εταιρικά sites δεν φτιάχνονται έτσι.
Μετά, οι διαδρομές που είναι ίδιες για όλους αλλά αλλάζουν χωρίς συντάκτη: ένας κατάλογος που ενημερώνεται από το ERP, μια λίστα που αλλάζει τιμές κάθε ώρα. Αυτές θέλουν σταδιακή αναδημιουργία (incremental regeneration). Σερβίρονται ως στατικό αρχείο, που ξαναχτίζεται στο παρασκήνιο σε τακτά διαστήματα ή όταν το ζητήσει το σύστημα από όπου έρχονται τα δεδομένα. Ο αναγνώστης παίρνει πάντα ένα αρχείο. Απλώς το αρχείο δεν είναι ποτέ πολύ παλιό. Από όλες τις τεχνικές της σύγχρονης αρχιτεκτονικής web, αυτή δίνει το μεγαλύτερο όφελος. Κι όμως, συνήθως παραλείπεται και η σελίδα φτιάχνεται από την αρχή σε κάθε επίσκεψη. Έτσι μια σελίδα καταλόγου αργεί τετρακόσια χιλιοστά του δευτερολέπτου χωρίς λόγο.
Μετά, οι διαδρομές που διαφέρουν για κάθε άτομο: το καλάθι, ο λογαριασμός, το dashboard, ό,τι βρίσκεται πίσω από σύνδεση. Αυτές φτιάχνονται στον server σε κάθε επίσκεψη. Η χρήσιμη βελτίωση εδώ είναι το streaming. Στέλνετε αμέσως τον σκελετό της σελίδας και αφήνετε τα αργά, προσωπικά κομμάτια να φτάσουν μόλις είναι έτοιμα. Έτσι ο αναγνώστης βλέπει κάτι πραγματικό ενώ το σύστημα προτάσεων ακόμη υπολογίζει.
Όσο για τη δημιουργία της σελίδας μέσα στον browser (client-side rendering), δεν είναι αρχιτεκτονική. Είναι εργαλείο για τα κομμάτια μιας σελίδας που είναι πραγματικά διαδραστικά: ένα φίλτρο, ένα εργαλείο παραμετροποίησης προϊόντος, ένας χάρτης, ένα player. Κάθε kilobyte JavaScript που στέλνεται για να εμφανιστεί στατικό κείμενο είναι ένα kilobyte που το κινητό πρέπει να κατεβάσει, να αναλύσει και να εκτελέσει πριν μπορέσετε να χρησιμοποιήσετε οτιδήποτε. Και το κινητό αυτό είναι συνήθως ένα μεσαίο Android σε ένα τρένο, όχι το laptop πάνω στο οποίο σχεδιάστηκε το site.
Από κάτω, η επιλογή βάσης δεδομένων έχει μικρότερη σημασία απ' όσο νομίζουν οι περισσότεροι. Μετράει περισσότερο η πειθαρχία γύρω της. Η PostgreSQL είναι η συνηθισμένη επιλογή, και όχι τυχαία. Είναι σχεσιακή όταν τα δεδομένα είναι σχεσιακά και χειρίζεται καλά δεδομένα JSON όταν δεν είναι. Κάνει αναζήτηση κειμένου αρκετά καλά ώστε τα περισσότερα έργα να μη χρειάζονται ποτέ χωριστό σύστημα αναζήτησης. Και δεν ανήκει σε κανέναν, άρα κανείς δεν μπορεί να σας αλλάξει την άδεια χρήσης. Σε serverless περιβάλλον χρειάζεται έναν connection pooler, ένα εργαλείο που μοιράζει τις συνδέσεις προς τη βάση. Είναι η πιο συχνή παράλειψη που μας καλούν να διορθώσουμε: ένα site που δουλεύει τέλεια μέχρι να γίνει δημοφιλές. Τότε εξαντλεί τις συνδέσεις του και πέφτει ακριβώς τη στιγμή που έρχεται η επιτυχία.
Στο περιεχόμενο, η επιλογή έχει πραγματικά υπέρ και κατά. Ένα headless CMS δίνει στην ομάδα marketing περιβάλλον διαχείρισης, προεπισκόπηση, ροή δημοσίευσης και ιστορικό. Το κόστος είναι μια συνδρομή και λίγη επιπλέον καθυστέρηση στο δίκτυο. Το περιεχόμενο μέσα στον κώδικα είναι πιο γρήγορο, δωρεάν και με πλήρες ιστορικό εκδόσεων, αλλά θέλει developer για κάθε κόμμα. Η σωστή απάντηση εξαρτάται μόνο από το ποιος γράφει, πόσο συχνά, και αν είναι διατεθειμένος να ανοίξει ένα pull request. Όποιος σας λέει ότι υπάρχει μία σωστή απάντηση έχει δουλέψει μόνο με ένα είδος πελάτη.
Τέλος, το κομμάτι που κρατά την αρχιτεκτονική τίμια: η μέτρηση, από πραγματικούς χρήστες και όχι από ένα laptop. Largest Contentful Paint κάτω από 2,5 δευτερόλεπτα, Interaction to Next Paint κάτω από 200 χιλιοστά του δευτερολέπτου, Cumulative Layout Shift κάτω από 0,1. Μετρημένα σε πραγματικούς επισκέπτες, στο 75ο εκατοστημόριο, στις συσκευές που πραγματικά κρατούν στο χέρι. Ένα όριο ταχύτητας που συμφωνείται πριν ξεκινήσει το design αξίζει περισσότερο από κάθε βελτιστοποίηση μετά. Έτσι η ταχύτητα παύει να είναι κάτι για το οποίο φταίνε οι developers. Γίνεται όριο που όλοι σέβονται από την πρώτη μέρα του σχεδιασμού.
Common questions
- Είναι το Next.js καλό για SEO;
- Ναι, όταν ο τρόπος που φτιάχνεται η σελίδα επιλέγεται χωριστά για κάθε ομάδα σελίδων. Το Next.js μπορεί να παράγει τις σελίδες ως στατικό HTML κατά το build και να τις ανανεώνει σταδιακά. Έτσι ένα crawler, ή ένα γλωσσικό μοντέλο, παίρνει ολόκληρο το περιεχόμενο χωρίς να εκτελέσει JavaScript. Το πλεονέκτημα χάνεται αν όλες οι σελίδες φτιάχνονται μέσα στον browser. Αυτό όμως είναι απόφαση ρύθμισης, όχι ιδιότητα του framework.
- Headless CMS ή WordPress;
- Ένα headless CMS χωρίζει το περιεχόμενο από την εμφάνιση. Έτσι το site μπορεί να ξαναφτιαχτεί χωρίς να ξαναπεραστεί το περιεχόμενο, και το frontend μπορεί να γίνει τόσο γρήγορο όσο θέλει η ομάδα. Το WordPress τα δένει μαζί, κάτι βολικό μέχρι να αλλάξει το design ή ο στόχος ταχύτητας. Διαλέξτε headless όταν το site θα συνεχίσει να εξελίσσεται, και περιεχόμενο μέσα στον κώδικα όταν σχεδόν κανείς δεν το αλλάζει.
- Ποιο είναι ένα καλό Largest Contentful Paint;
- Κάτω από 2,5 δευτερόλεπτα στο 75ο εκατοστημόριο των πραγματικών χρηστών σε κινητό. Μαζί με αυτό, το Interaction to Next Paint πρέπει να είναι κάτω από 200 χιλιοστά του δευτερολέπτου και το Cumulative Layout Shift κάτω από 0,1. Οι μετρήσεις εργαστηρίου από έναν desktop browser με γρήγορη σύνδεση βοηθούν να βρείτε προβλήματα, αλλά ως στόχος δεν αξίζουν τίποτα.
The service behind it
Custom Web Development
Κατασκευή ιστοσελίδων στην Αθήνα με custom web development: μοναδικά, πολύ γρήγορα websites, γραμμένα από το μηδέν σε React και Next.js για το brand στο οποίο ανήκουν. Χωρίς templates.