Wprowadzenie do nawigacji w NextJS
W tej części podręcznika porozmawiamy o działaniu linków w NextJS.
Na początek omówmy, co jest takiego specjalnego w linkach. Przyjrzymy się im w różnych podejściach tworzenia strony internetowej.
Strona w React
Załóżmy, że masz stronę w React. Jak wiadomo, React to SPA - strona, na której użytkownik zawsze pozostaje na jednej stronie. Możesz podłączyć React Router i użytkownik będzie myślał, że chodzi po różnych stronach, podczas gdy fizycznie pozostaje na jednym pliku.
Podczas gdy użytkownik będzie klikał na linki, będzie mu się wydawało, że trafia na inną stronę, ale strona internetowa w przeglądarce nie będzie się przeładowywać - React dynamicznie będzie tworzył to, co użytkownik widzi na ekranie.
W takim schemacie użytkownik otrzymuje makietę strony przy pierwszym wejściu na stronę, a następnie części strony po prostu się zmieniają przez JavaScript. Przy tym strona może pobierać dane z serwera przez AJAX.
Takie podejście zmniejsza obciążenie hostingu (jego zasoby kosztują nasze pieniądze), a także obciążenie łącza internetowego użytkownika.
Ale takie podejście ma minus - problem z SEO. Wydaje się, że strona ma zestaw linków, i w pasku adresu coś się zmienia, i można nawet przesłać link do konkretnej strony przez messenger. Jednakże, zawartość strony tworzona jest dynamicznie po stronie klienta i wyszukiwarki nie są w stanie tego przetworzyć. Dlatego taka strona nie będzie się promować.
Nie wszystkie strony jednak są przeznaczone do promocji w wyszukiwarkach. I jeśli twoja nie jest przeznaczona, to ten schemat jest całkiem działający dla ciebie.
Strona na backendzie
Załóżmy, że twoja strona jest zrobiona w jednym z języków backendu. Na przykład, w PHP.
W tym przypadku, kiedy użytkownik będzie klikał na linki, strona internetowa będzie za każdym razem ładowana w całości.
Problem w tym, że znacząca część strony już jest u użytkownika. W końcu, jak już wiesz, na stronie zwykle zmienia się tylko treść i metadane, a cała reszta pozostaje niezmienna.
Po co nam pobierać resztę, jeśli zmieniła się tylko treść? To tworzy zwiększone obciążenie serwera i łącza internetowego.
Jest jeszcze problem. Załóżmy, że na stronie, którą otrzymujemy, w treści znajduje się lista produktów, jak w sklepie internetowym. Oczywiście, że każdy produkt ma identyczną wersję. Bardziej optymalnie byłoby pobrać tylko dane produktów i szablon wyświetlania produktu. A następnie po stronie klienta wyświetlić każdy produkt w tym szablonie. Ale my pobieramy produkty wraz z powtarzającą się wersją produktu.
Podsumowując, jeśli mamy stronę na czystym backendzie, przesyłamy przez sieć wiele zbędnych danych.
Jednakże, w tym przypadku nie mamy problemu z SEO. Po zażądaniu URL zawsze zwracana jest statyczna zawartość, zrozumiała dla wyszukiwarek.
Strona na NextJS
NextJS łączy oba podejścia. Kiedy użytkownik wpisuje URL bezpośrednio w pasek adresu, w odpowiedzi otrzymuje statyczną zawartość strony.
Kiedy zaś użytkownik zaczyna klikać na linki na naszej stronie, to strona internetowa nie odświeża się w całości, a przez AJAX pobierane są potrzebne użytkownikowi dane.
Kiedy wyszukiwarka chodzi po naszej stronie, widzi potrzebną jej statyczną zawartość. A kiedy użytkownik chodzi po naszej stronie, nasza strona zaczyna zachowywać się podobnie do SPA.
I, co najważniejsze, NextJS wykonuje to wszystko automatycznie! My nie musimy się o to troszczyć - on sam wszystko zrobi. Pięknie!
W kolejnych lekcjach będziemy się zastanawiać, jak sprawić, żeby NextJS działał w opisany sposób.
