Εισαγωγή στην Πλοήγηση στο NextJS

Σε αυτήν την ενότητα του βιβλίου θα μιλήσουμε για τη λειτουργία των συνδέσμων στο NextJS.

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

Ιστοσελίδα σε React

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

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

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

Αυτή η προσέγγιση μειώνει το φόρτο εργασίας στον hosting (των οποίων οι πόροι κοστίζουν τα χρήματά μας), καθώς και το φόρτο εργασίας στο κανάλι internet του χρήστη.

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

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

Ιστοσελίδα σε backend

Ας υποθέσουμε ότι η ιστοσελίδα σας είναι φτιαγμένη σε μία από τις γλώσσες backend. Για παράδειγμα, σε PHP.

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

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

Γιατί να κατεβάσουμε τα υπόλοιπα, εάν άλλαξε μόνο το περιεχόμενο; Αυτό δημιουργεί αυξημένο φόρτο εργασίας στον server και στο κανάλι internet.

Υπάρχει ένα ακόμη πρόβλημα. Ας υποθέσουμε ότι στη σελίδα, που λαμβάνουμε, στο περιεχόμενο βρίσκεται μια λίστα προϊόντων, όπως σε ένα ηλεκτρονικό κατάστημα. Προφανώς, κάθε προϊόν έχει την ίδια δομή. Θα ήταν πιο βέλτιστο να κατεβάσουμε μόνο τα δεδομένα των προϊόντων, και το πρότυπο εμφάνισης του προϊόντος. Και στη συνέχεια στον client να εμφανίσουμε κάθε προϊόν σε αυτό το πρότυπο. Αλλά εμείς κατεβάζουμε τα προϊόντα μαζί με την επαναλαμβανόμενη δομή του προϊόντος.

Συνοψίζοντας, εάν έχουμε ιστοσελίδα σε καθαρό backend, μεταφέρουμε μέσω του δικτύου πολλά περιττά δεδομένα.

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

Ιστοσελίδα σε NextJS

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

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

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

Και, το πιο σημαντικό, το NextJS κάνει όλα αυτά αυτόματα! Δεν χρειάζεται να ανησυχούμε για αυτό - θα τα κάνει όλα μόνο του. Ομορφιά!

Στα επόμενα μαθήματα θα αναλύσουμε πώς να κάνουμε το NextJS να λειτουργεί με τον περιγραφόμενο τρόπο.