Introduzione alla navigazione in NextJS
In questa sezione del tutorial parleremo del funzionamento dei link in NextJS.
Per cominciare, discutiamo cosa c'è di così speciale nei link. Osserviamoli in diversi approcci alla creazione di siti web.
Sito in React
Supponiamo che tu abbia un sito in React. Come è noto, React rappresenta una SPA - un sito in cui l'utente rimane sempre sulla stessa pagina. Puoi installare React Router e l'utente penserà di navigare tra pagine diverse, pur rimanendo fisicamente su un unico file.
In questo scenario, l'utente cliccherà sui link, gli sembrerà di arrivare su un'altra pagina, ma la pagina del sito nel browser non si ricaricherà - React formerà dinamicamente ciò che l'utente vede sullo schermo.
In questo schema, l'utente riceve il layout del sito al primo accesso alla pagina, e poi le parti del sito semplicemente cambiano tramite JavaScript. Inoltre, il sito può richiedere dati dal server tramite AJAX.
Questo approccio riduce il carico sull'hosting (le cui risorse costano i nostri soldi), così come il carico sulla connessione internet dell'utente.
Ma questo approccio ha un svantaggio: il problema con la SEO. Anche se il sito ha una serie di link, e nella barra degli indirizzi qualcosa cambia, e si può persino inviare un link a una pagina specifica del sito tramite messaggistica. Tuttavia, il contenuto della pagina è generato dinamicamente sul client e i motori di ricerca non sono in grado di elaborarlo. Pertanto, un tale sito non verrà posizionato.
Non tutti i siti, tuttavia, sono destinati al posizionamento nei motori di ricerca. E se il tuo non lo è, allora questo schema è perfettamente funzionante per te.
Sito con backend
Supponiamo che il tuo sito sia fatto con uno dei linguaggi di backend. Ad esempio, con PHP.
In questo caso, quando l'utente cliccherà sui link, la pagina del sito verrà caricata completamente ogni volta.
Il problema è che una parte sostanziale della pagina è già in possesso dell'utente. Infatti, come già sai, sulla pagina di solito cambia solo il contenuto e i metadati, mentre tutto il resto rimane invariato.
Perché dovremmo scaricare il resto, se è cambiato solo il contenuto? Questo crea un carico elevato sul server e sulla connessione internet.
C'è un altro problema. Supponiamo che sulla pagina, che riceviamo, nel contenuto sia posizionato un elenco di prodotti, come in un negozio online. Ovviamente, ogni prodotto ha la stessa impaginazione. Sarebbe più ottimale scaricare solo i dati dei prodotti e il template di visualizzazione del prodotto. E poi sul client visualizzare ogni prodotto in quel template. Ma noi scarichiamo i prodotti insieme alla ripetizione dell'impaginazione del prodotto.
In sintesi, se abbiamo un sito con backend puro, trasmettiamo in rete molti dati superflui.
Tuttavia, in questo caso non abbiamo problemi con la SEO. All'URL richiesto viene sempre restituito un contenuto Statico, comprensibile per i motori di ricerca.
Sito in NextJS
NextJS combina entrambi gli approcci. Quando l'utente inserisce l'URL direttamente nella barra degli indirizzi, in risposta riceve il contenuto statico della pagina.
Quando invece l'utente inizia a cliccare sui link del nostro sito, la pagina del sito non si aggiorna completamente, ma tramite AJAX vengono caricati i dati necessari all'utente.
Quando il motore di ricerca naviga sul nostro sito, vede il contenuto statico di cui ha bisogno. E quando l'utente naviga sul nostro sito, il nostro sito inizia a comportarsi come una SPA.
E, cosa più importante, NextJS fa tutto questo automaticamente! Non dobbiamo preoccuparcene - farà tutto da solo. Bellissimo!
Nelle prossime lezioni analizzeremo come far funzionare NextJS nel modo descritto.
